1. Docs
2. Utilities
3. Background

Background

Set background colors using semantic theme tokens. VelinStyle also provides color-mix() variants for automatic tints and shades.

Theme Colors

Apply any theme color as a background:

<div class="velin-bg-primary velin-text-white velin-p-3">Primary</div>
<div class="velin-bg-secondary velin-text-white velin-p-3">Secondary</div>
<div class="velin-bg-success velin-text-white velin-p-3">Success</div>
<div class="velin-bg-danger velin-text-white velin-p-3">Danger</div>
<div class="velin-bg-warning velin-p-3">Warning</div>
<div class="velin-bg-info velin-p-3">Info</div>
<div class="velin-bg-light velin-p-3">Light</div>
<div class="velin-bg-dark velin-text-white velin-p-3">Dark</div>

Color-Mix Variants

Use color-mix() modifiers to lighten or darken any background color. The pattern is .velin-bg-{color}-{tint|shade}-{amount} where amount is 10–90 in steps of 10.

<!-- 30% lighter primary -->
<div class="velin-bg-primary-tint-30 velin-p-3">Tint 30</div>

<!-- 50% darker primary -->
<div class="velin-bg-primary-shade-50 velin-text-white velin-p-3">Shade 50</div>

Background Opacity

Combine with .velin-bg-opacity-{value} to control transparency:

<div class="velin-bg-primary velin-bg-opacity-75">75% opacity</div>
<div class="velin-bg-primary velin-bg-opacity-50">50% opacity</div>
<div class="velin-bg-primary velin-bg-opacity-25">25% opacity</div>

Gradient Backgrounds

Add .velin-bg-gradient alongside a background color to apply a subtle linear gradient overlay.

<div class="velin-bg-primary velin-bg-gradient velin-text-white velin-p-4">
  Gradient background
</div>