Contextualtextclassesalsoworkwellonanchorswiththeprovidedhoverandfocusstates.**Notethatthe`.text-white` and `.text-muted`classhasnoadditionallinkstylingbeyondunderline.**
Similartothecontextualtextcolorclasses,easilysetthebackgroundofanelementtoanycontextualclass.Anchorcomponentswilldarkenonhover,justlikethetextclasses.Backgroundutilities**donotset`color`**, so in some cases you'll want to use `.text-*`utilities.
{%captureexample%}
{%forcolorinsite.data.theme-colors%}
<divclass="p-3 mb-2 bg-{{ color.name }} {% if color.name == "light" or color.name == "warning" %}text-dark{% else %}text-white{% endif %}">.bg-{{color.name}}</div>{%endfor%}
When`$enable-gradients` is set to `true` (default is `false`), you can use `.bg-gradient-`utilityclasses.[LearnaboutourSassoptions]({{site.baseurl}}/docs/{{site.docs_version}}/getting-started/theming/#sass-options)toenabletheseclassesandmore.