Utilities
Backgrounds
Gradients with from, via and to stops, background size, position, repeat, attachment and clip.
367classes
0variant classes
10properties
Live example
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
<div class="h-24 rounded-xl bg-gradient-to-r from-primary to-accent"></div>
<div class="h-24 rounded-xl bg-gradient-to-br from-violet-500 via-fuchsia-500 to-orange-400"></div>
<div class="h-24 rounded-xl bg-gradient-to-t from-sky-500 to-emerald-400"></div>
</div>Variant support
Variants are generated where they are useful, which keeps the whole stylesheet small enough to link from a CDN. Prefix a class with one of these to apply it in that state or above that width. Stacked variants such as dark:hover: are not part of the prebuilt file; arbitrary values take any variant, stacked, with the optional script or the purge CLI.
| Kind | Prefixes | Classes in this category |
|---|---|---|
| State | not generated | 0 |
| Group and peer | not generated | 0 |
| Structure | not generated | 0 |
| Motion | not generated | 0 |
| Scheme | not generated | 0 |
| Breakpoints | not generated | 0 |
| Containers | not generated | 0 |
| Media and direction | not generated | 0 |
Background image 9
Variants: none
| Class | CSS |
|---|---|
bg-gradient-to-t | background-image: linear-gradient(to top, var(--m-gradient-stops)); |
bg-gradient-to-tr | background-image: linear-gradient(to top right, var(--m-gradient-stops)); |
bg-gradient-to-r | background-image: linear-gradient(to right, var(--m-gradient-stops)); |
bg-gradient-to-br | background-image: linear-gradient(to bottom right, var(--m-gradient-stops)); |
bg-gradient-to-b | background-image: linear-gradient(to bottom, var(--m-gradient-stops)); |
bg-gradient-to-bl | background-image: linear-gradient(to bottom left, var(--m-gradient-stops)); |
bg-gradient-to-l | background-image: linear-gradient(to left, var(--m-gradient-stops)); |
bg-gradient-to-tl | background-image: linear-gradient(to top left, var(--m-gradient-stops)); |
bg-none | background-image: none; |
Gradient from 114
Variants: none
| Class | CSS |
|---|---|
from-background | --m-gradient-from: var(--background); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-foreground | --m-gradient-from: var(--foreground); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-surface | --m-gradient-from: var(--surface); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-surface-2 | --m-gradient-from: var(--surface-2); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-surface-3 | --m-gradient-from: var(--surface-3); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-muted | --m-gradient-from: var(--muted); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-muted-foreground | --m-gradient-from: var(--muted-foreground); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-border | --m-gradient-from: var(--border); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-primary | --m-gradient-from: var(--primary); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-primary-foreground | --m-gradient-from: var(--primary-foreground); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-ring | --m-gradient-from: var(--ring); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-secondary | --m-gradient-from: var(--secondary); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-secondary-foreground | --m-gradient-from: var(--secondary-foreground); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-accent | --m-gradient-from: var(--accent); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-accent-foreground | --m-gradient-from: var(--accent-foreground); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-success | --m-gradient-from: var(--success); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-success-foreground | --m-gradient-from: var(--success-foreground); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-warning | --m-gradient-from: var(--warning); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-warning-foreground | --m-gradient-from: var(--warning-foreground); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-danger | --m-gradient-from: var(--danger); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-danger-foreground | --m-gradient-from: var(--danger-foreground); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-info | --m-gradient-from: var(--info); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-info-foreground | --m-gradient-from: var(--info-foreground); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-white | --m-gradient-from: #fff; --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-black | --m-gradient-from: #000; --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-transparent | --m-gradient-from: transparent; --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-slate-400 | --m-gradient-from: var(--color-slate-400); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-slate-500 | --m-gradient-from: var(--color-slate-500); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-slate-600 | --m-gradient-from: var(--color-slate-600); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-gray-400 | --m-gradient-from: var(--color-gray-400); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-gray-500 | --m-gradient-from: var(--color-gray-500); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-gray-600 | --m-gradient-from: var(--color-gray-600); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-zinc-400 | --m-gradient-from: var(--color-zinc-400); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-zinc-500 | --m-gradient-from: var(--color-zinc-500); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-zinc-600 | --m-gradient-from: var(--color-zinc-600); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-neutral-400 | --m-gradient-from: var(--color-neutral-400); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-neutral-500 | --m-gradient-from: var(--color-neutral-500); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-neutral-600 | --m-gradient-from: var(--color-neutral-600); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-stone-400 | --m-gradient-from: var(--color-stone-400); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-stone-500 | --m-gradient-from: var(--color-stone-500); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-stone-600 | --m-gradient-from: var(--color-stone-600); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-red-400 | --m-gradient-from: var(--color-red-400); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-red-500 | --m-gradient-from: var(--color-red-500); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-red-600 | --m-gradient-from: var(--color-red-600); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-orange-400 | --m-gradient-from: var(--color-orange-400); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-orange-500 | --m-gradient-from: var(--color-orange-500); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-orange-600 | --m-gradient-from: var(--color-orange-600); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-amber-400 | --m-gradient-from: var(--color-amber-400); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-amber-500 | --m-gradient-from: var(--color-amber-500); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-amber-600 | --m-gradient-from: var(--color-amber-600); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-yellow-400 | --m-gradient-from: var(--color-yellow-400); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-yellow-500 | --m-gradient-from: var(--color-yellow-500); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-yellow-600 | --m-gradient-from: var(--color-yellow-600); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-lime-400 | --m-gradient-from: var(--color-lime-400); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-lime-500 | --m-gradient-from: var(--color-lime-500); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-lime-600 | --m-gradient-from: var(--color-lime-600); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-green-400 | --m-gradient-from: var(--color-green-400); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-green-500 | --m-gradient-from: var(--color-green-500); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-green-600 | --m-gradient-from: var(--color-green-600); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-emerald-400 | --m-gradient-from: var(--color-emerald-400); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-emerald-500 | --m-gradient-from: var(--color-emerald-500); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-emerald-600 | --m-gradient-from: var(--color-emerald-600); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-teal-400 | --m-gradient-from: var(--color-teal-400); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-teal-500 | --m-gradient-from: var(--color-teal-500); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-teal-600 | --m-gradient-from: var(--color-teal-600); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-cyan-400 | --m-gradient-from: var(--color-cyan-400); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-cyan-500 | --m-gradient-from: var(--color-cyan-500); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-cyan-600 | --m-gradient-from: var(--color-cyan-600); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-sky-400 | --m-gradient-from: var(--color-sky-400); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-sky-500 | --m-gradient-from: var(--color-sky-500); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-sky-600 | --m-gradient-from: var(--color-sky-600); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-blue-400 | --m-gradient-from: var(--color-blue-400); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-blue-500 | --m-gradient-from: var(--color-blue-500); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-blue-600 | --m-gradient-from: var(--color-blue-600); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-indigo-400 | --m-gradient-from: var(--color-indigo-400); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-indigo-500 | --m-gradient-from: var(--color-indigo-500); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-indigo-600 | --m-gradient-from: var(--color-indigo-600); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-violet-400 | --m-gradient-from: var(--color-violet-400); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-violet-500 | --m-gradient-from: var(--color-violet-500); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-violet-600 | --m-gradient-from: var(--color-violet-600); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-purple-400 | --m-gradient-from: var(--color-purple-400); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-purple-500 | --m-gradient-from: var(--color-purple-500); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-purple-600 | --m-gradient-from: var(--color-purple-600); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-fuchsia-400 | --m-gradient-from: var(--color-fuchsia-400); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-fuchsia-500 | --m-gradient-from: var(--color-fuchsia-500); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-fuchsia-600 | --m-gradient-from: var(--color-fuchsia-600); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-pink-400 | --m-gradient-from: var(--color-pink-400); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-pink-500 | --m-gradient-from: var(--color-pink-500); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-pink-600 | --m-gradient-from: var(--color-pink-600); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-rose-400 | --m-gradient-from: var(--color-rose-400); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-rose-500 | --m-gradient-from: var(--color-rose-500); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-rose-600 | --m-gradient-from: var(--color-rose-600); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-slate | --m-gradient-from: color-mix(in oklab, var(--color-slate-400) calc(var(--mode) * 100%), var(--color-slate-500)); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-gray | --m-gradient-from: color-mix(in oklab, var(--color-gray-400) calc(var(--mode) * 100%), var(--color-gray-500)); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-zinc | --m-gradient-from: color-mix(in oklab, var(--color-zinc-400) calc(var(--mode) * 100%), var(--color-zinc-500)); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-neutral | --m-gradient-from: color-mix(in oklab, var(--color-neutral-400) calc(var(--mode) * 100%), var(--color-neutral-500)); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-stone | --m-gradient-from: color-mix(in oklab, var(--color-stone-400) calc(var(--mode) * 100%), var(--color-stone-500)); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-red | --m-gradient-from: color-mix(in oklab, var(--color-red-400) calc(var(--mode) * 100%), var(--color-red-500)); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-orange | --m-gradient-from: color-mix(in oklab, var(--color-orange-400) calc(var(--mode) * 100%), var(--color-orange-500)); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-amber | --m-gradient-from: color-mix(in oklab, var(--color-amber-400) calc(var(--mode) * 100%), var(--color-amber-500)); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-yellow | --m-gradient-from: color-mix(in oklab, var(--color-yellow-400) calc(var(--mode) * 100%), var(--color-yellow-500)); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-lime | --m-gradient-from: color-mix(in oklab, var(--color-lime-400) calc(var(--mode) * 100%), var(--color-lime-500)); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-green | --m-gradient-from: color-mix(in oklab, var(--color-green-400) calc(var(--mode) * 100%), var(--color-green-500)); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-emerald | --m-gradient-from: color-mix(in oklab, var(--color-emerald-400) calc(var(--mode) * 100%), var(--color-emerald-500)); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-teal | --m-gradient-from: color-mix(in oklab, var(--color-teal-400) calc(var(--mode) * 100%), var(--color-teal-500)); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-cyan | --m-gradient-from: color-mix(in oklab, var(--color-cyan-400) calc(var(--mode) * 100%), var(--color-cyan-500)); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-sky | --m-gradient-from: color-mix(in oklab, var(--color-sky-400) calc(var(--mode) * 100%), var(--color-sky-500)); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-blue | --m-gradient-from: color-mix(in oklab, var(--color-blue-400) calc(var(--mode) * 100%), var(--color-blue-500)); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-indigo | --m-gradient-from: color-mix(in oklab, var(--color-indigo-400) calc(var(--mode) * 100%), var(--color-indigo-500)); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-violet | --m-gradient-from: color-mix(in oklab, var(--color-violet-400) calc(var(--mode) * 100%), var(--color-violet-500)); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-purple | --m-gradient-from: color-mix(in oklab, var(--color-purple-400) calc(var(--mode) * 100%), var(--color-purple-500)); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-fuchsia | --m-gradient-from: color-mix(in oklab, var(--color-fuchsia-400) calc(var(--mode) * 100%), var(--color-fuchsia-500)); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-pink | --m-gradient-from: color-mix(in oklab, var(--color-pink-400) calc(var(--mode) * 100%), var(--color-pink-500)); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
from-rose | --m-gradient-from: color-mix(in oklab, var(--color-rose-400) calc(var(--mode) * 100%), var(--color-rose-500)); --m-gradient-stops: var(--m-gradient-from), var(--m-gradient-via, var(--m-gradient-to, transparent)), var(--m-gradient-to, transparent); |
Gradient via 114
Variants: none
| Class | CSS |
|---|---|
via-background | --m-gradient-via: var(--background); |
via-foreground | --m-gradient-via: var(--foreground); |
via-surface | --m-gradient-via: var(--surface); |
via-surface-2 | --m-gradient-via: var(--surface-2); |
via-surface-3 | --m-gradient-via: var(--surface-3); |
via-muted | --m-gradient-via: var(--muted); |
via-muted-foreground | --m-gradient-via: var(--muted-foreground); |
via-border | --m-gradient-via: var(--border); |
via-primary | --m-gradient-via: var(--primary); |
via-primary-foreground | --m-gradient-via: var(--primary-foreground); |
via-ring | --m-gradient-via: var(--ring); |
via-secondary | --m-gradient-via: var(--secondary); |
via-secondary-foreground | --m-gradient-via: var(--secondary-foreground); |
via-accent | --m-gradient-via: var(--accent); |
via-accent-foreground | --m-gradient-via: var(--accent-foreground); |
via-success | --m-gradient-via: var(--success); |
via-success-foreground | --m-gradient-via: var(--success-foreground); |
via-warning | --m-gradient-via: var(--warning); |
via-warning-foreground | --m-gradient-via: var(--warning-foreground); |
via-danger | --m-gradient-via: var(--danger); |
via-danger-foreground | --m-gradient-via: var(--danger-foreground); |
via-info | --m-gradient-via: var(--info); |
via-info-foreground | --m-gradient-via: var(--info-foreground); |
via-white | --m-gradient-via: #fff; |
via-black | --m-gradient-via: #000; |
via-transparent | --m-gradient-via: transparent; |
via-slate-400 | --m-gradient-via: var(--color-slate-400); |
via-slate-500 | --m-gradient-via: var(--color-slate-500); |
via-slate-600 | --m-gradient-via: var(--color-slate-600); |
via-gray-400 | --m-gradient-via: var(--color-gray-400); |
via-gray-500 | --m-gradient-via: var(--color-gray-500); |
via-gray-600 | --m-gradient-via: var(--color-gray-600); |
via-zinc-400 | --m-gradient-via: var(--color-zinc-400); |
via-zinc-500 | --m-gradient-via: var(--color-zinc-500); |
via-zinc-600 | --m-gradient-via: var(--color-zinc-600); |
via-neutral-400 | --m-gradient-via: var(--color-neutral-400); |
via-neutral-500 | --m-gradient-via: var(--color-neutral-500); |
via-neutral-600 | --m-gradient-via: var(--color-neutral-600); |
via-stone-400 | --m-gradient-via: var(--color-stone-400); |
via-stone-500 | --m-gradient-via: var(--color-stone-500); |
via-stone-600 | --m-gradient-via: var(--color-stone-600); |
via-red-400 | --m-gradient-via: var(--color-red-400); |
via-red-500 | --m-gradient-via: var(--color-red-500); |
via-red-600 | --m-gradient-via: var(--color-red-600); |
via-orange-400 | --m-gradient-via: var(--color-orange-400); |
via-orange-500 | --m-gradient-via: var(--color-orange-500); |
via-orange-600 | --m-gradient-via: var(--color-orange-600); |
via-amber-400 | --m-gradient-via: var(--color-amber-400); |
via-amber-500 | --m-gradient-via: var(--color-amber-500); |
via-amber-600 | --m-gradient-via: var(--color-amber-600); |
via-yellow-400 | --m-gradient-via: var(--color-yellow-400); |
via-yellow-500 | --m-gradient-via: var(--color-yellow-500); |
via-yellow-600 | --m-gradient-via: var(--color-yellow-600); |
via-lime-400 | --m-gradient-via: var(--color-lime-400); |
via-lime-500 | --m-gradient-via: var(--color-lime-500); |
via-lime-600 | --m-gradient-via: var(--color-lime-600); |
via-green-400 | --m-gradient-via: var(--color-green-400); |
via-green-500 | --m-gradient-via: var(--color-green-500); |
via-green-600 | --m-gradient-via: var(--color-green-600); |
via-emerald-400 | --m-gradient-via: var(--color-emerald-400); |
via-emerald-500 | --m-gradient-via: var(--color-emerald-500); |
via-emerald-600 | --m-gradient-via: var(--color-emerald-600); |
via-teal-400 | --m-gradient-via: var(--color-teal-400); |
via-teal-500 | --m-gradient-via: var(--color-teal-500); |
via-teal-600 | --m-gradient-via: var(--color-teal-600); |
via-cyan-400 | --m-gradient-via: var(--color-cyan-400); |
via-cyan-500 | --m-gradient-via: var(--color-cyan-500); |
via-cyan-600 | --m-gradient-via: var(--color-cyan-600); |
via-sky-400 | --m-gradient-via: var(--color-sky-400); |
via-sky-500 | --m-gradient-via: var(--color-sky-500); |
via-sky-600 | --m-gradient-via: var(--color-sky-600); |
via-blue-400 | --m-gradient-via: var(--color-blue-400); |
via-blue-500 | --m-gradient-via: var(--color-blue-500); |
via-blue-600 | --m-gradient-via: var(--color-blue-600); |
via-indigo-400 | --m-gradient-via: var(--color-indigo-400); |
via-indigo-500 | --m-gradient-via: var(--color-indigo-500); |
via-indigo-600 | --m-gradient-via: var(--color-indigo-600); |
via-violet-400 | --m-gradient-via: var(--color-violet-400); |
via-violet-500 | --m-gradient-via: var(--color-violet-500); |
via-violet-600 | --m-gradient-via: var(--color-violet-600); |
via-purple-400 | --m-gradient-via: var(--color-purple-400); |
via-purple-500 | --m-gradient-via: var(--color-purple-500); |
via-purple-600 | --m-gradient-via: var(--color-purple-600); |
via-fuchsia-400 | --m-gradient-via: var(--color-fuchsia-400); |
via-fuchsia-500 | --m-gradient-via: var(--color-fuchsia-500); |
via-fuchsia-600 | --m-gradient-via: var(--color-fuchsia-600); |
via-pink-400 | --m-gradient-via: var(--color-pink-400); |
via-pink-500 | --m-gradient-via: var(--color-pink-500); |
via-pink-600 | --m-gradient-via: var(--color-pink-600); |
via-rose-400 | --m-gradient-via: var(--color-rose-400); |
via-rose-500 | --m-gradient-via: var(--color-rose-500); |
via-rose-600 | --m-gradient-via: var(--color-rose-600); |
via-slate | --m-gradient-via: color-mix(in oklab, var(--color-slate-400) calc(var(--mode) * 100%), var(--color-slate-500)); |
via-gray | --m-gradient-via: color-mix(in oklab, var(--color-gray-400) calc(var(--mode) * 100%), var(--color-gray-500)); |
via-zinc | --m-gradient-via: color-mix(in oklab, var(--color-zinc-400) calc(var(--mode) * 100%), var(--color-zinc-500)); |
via-neutral | --m-gradient-via: color-mix(in oklab, var(--color-neutral-400) calc(var(--mode) * 100%), var(--color-neutral-500)); |
via-stone | --m-gradient-via: color-mix(in oklab, var(--color-stone-400) calc(var(--mode) * 100%), var(--color-stone-500)); |
via-red | --m-gradient-via: color-mix(in oklab, var(--color-red-400) calc(var(--mode) * 100%), var(--color-red-500)); |
via-orange | --m-gradient-via: color-mix(in oklab, var(--color-orange-400) calc(var(--mode) * 100%), var(--color-orange-500)); |
via-amber | --m-gradient-via: color-mix(in oklab, var(--color-amber-400) calc(var(--mode) * 100%), var(--color-amber-500)); |
via-yellow | --m-gradient-via: color-mix(in oklab, var(--color-yellow-400) calc(var(--mode) * 100%), var(--color-yellow-500)); |
via-lime | --m-gradient-via: color-mix(in oklab, var(--color-lime-400) calc(var(--mode) * 100%), var(--color-lime-500)); |
via-green | --m-gradient-via: color-mix(in oklab, var(--color-green-400) calc(var(--mode) * 100%), var(--color-green-500)); |
via-emerald | --m-gradient-via: color-mix(in oklab, var(--color-emerald-400) calc(var(--mode) * 100%), var(--color-emerald-500)); |
via-teal | --m-gradient-via: color-mix(in oklab, var(--color-teal-400) calc(var(--mode) * 100%), var(--color-teal-500)); |
via-cyan | --m-gradient-via: color-mix(in oklab, var(--color-cyan-400) calc(var(--mode) * 100%), var(--color-cyan-500)); |
via-sky | --m-gradient-via: color-mix(in oklab, var(--color-sky-400) calc(var(--mode) * 100%), var(--color-sky-500)); |
via-blue | --m-gradient-via: color-mix(in oklab, var(--color-blue-400) calc(var(--mode) * 100%), var(--color-blue-500)); |
via-indigo | --m-gradient-via: color-mix(in oklab, var(--color-indigo-400) calc(var(--mode) * 100%), var(--color-indigo-500)); |
via-violet | --m-gradient-via: color-mix(in oklab, var(--color-violet-400) calc(var(--mode) * 100%), var(--color-violet-500)); |
via-purple | --m-gradient-via: color-mix(in oklab, var(--color-purple-400) calc(var(--mode) * 100%), var(--color-purple-500)); |
via-fuchsia | --m-gradient-via: color-mix(in oklab, var(--color-fuchsia-400) calc(var(--mode) * 100%), var(--color-fuchsia-500)); |
via-pink | --m-gradient-via: color-mix(in oklab, var(--color-pink-400) calc(var(--mode) * 100%), var(--color-pink-500)); |
via-rose | --m-gradient-via: color-mix(in oklab, var(--color-rose-400) calc(var(--mode) * 100%), var(--color-rose-500)); |
Gradient to 114
Variants: none
| Class | CSS |
|---|---|
to-background | --m-gradient-to: var(--background); |
to-foreground | --m-gradient-to: var(--foreground); |
to-surface | --m-gradient-to: var(--surface); |
to-surface-2 | --m-gradient-to: var(--surface-2); |
to-surface-3 | --m-gradient-to: var(--surface-3); |
to-muted | --m-gradient-to: var(--muted); |
to-muted-foreground | --m-gradient-to: var(--muted-foreground); |
to-border | --m-gradient-to: var(--border); |
to-primary | --m-gradient-to: var(--primary); |
to-primary-foreground | --m-gradient-to: var(--primary-foreground); |
to-ring | --m-gradient-to: var(--ring); |
to-secondary | --m-gradient-to: var(--secondary); |
to-secondary-foreground | --m-gradient-to: var(--secondary-foreground); |
to-accent | --m-gradient-to: var(--accent); |
to-accent-foreground | --m-gradient-to: var(--accent-foreground); |
to-success | --m-gradient-to: var(--success); |
to-success-foreground | --m-gradient-to: var(--success-foreground); |
to-warning | --m-gradient-to: var(--warning); |
to-warning-foreground | --m-gradient-to: var(--warning-foreground); |
to-danger | --m-gradient-to: var(--danger); |
to-danger-foreground | --m-gradient-to: var(--danger-foreground); |
to-info | --m-gradient-to: var(--info); |
to-info-foreground | --m-gradient-to: var(--info-foreground); |
to-white | --m-gradient-to: #fff; |
to-black | --m-gradient-to: #000; |
to-transparent | --m-gradient-to: transparent; |
to-slate-400 | --m-gradient-to: var(--color-slate-400); |
to-slate-500 | --m-gradient-to: var(--color-slate-500); |
to-slate-600 | --m-gradient-to: var(--color-slate-600); |
to-gray-400 | --m-gradient-to: var(--color-gray-400); |
to-gray-500 | --m-gradient-to: var(--color-gray-500); |
to-gray-600 | --m-gradient-to: var(--color-gray-600); |
to-zinc-400 | --m-gradient-to: var(--color-zinc-400); |
to-zinc-500 | --m-gradient-to: var(--color-zinc-500); |
to-zinc-600 | --m-gradient-to: var(--color-zinc-600); |
to-neutral-400 | --m-gradient-to: var(--color-neutral-400); |
to-neutral-500 | --m-gradient-to: var(--color-neutral-500); |
to-neutral-600 | --m-gradient-to: var(--color-neutral-600); |
to-stone-400 | --m-gradient-to: var(--color-stone-400); |
to-stone-500 | --m-gradient-to: var(--color-stone-500); |
to-stone-600 | --m-gradient-to: var(--color-stone-600); |
to-red-400 | --m-gradient-to: var(--color-red-400); |
to-red-500 | --m-gradient-to: var(--color-red-500); |
to-red-600 | --m-gradient-to: var(--color-red-600); |
to-orange-400 | --m-gradient-to: var(--color-orange-400); |
to-orange-500 | --m-gradient-to: var(--color-orange-500); |
to-orange-600 | --m-gradient-to: var(--color-orange-600); |
to-amber-400 | --m-gradient-to: var(--color-amber-400); |
to-amber-500 | --m-gradient-to: var(--color-amber-500); |
to-amber-600 | --m-gradient-to: var(--color-amber-600); |
to-yellow-400 | --m-gradient-to: var(--color-yellow-400); |
to-yellow-500 | --m-gradient-to: var(--color-yellow-500); |
to-yellow-600 | --m-gradient-to: var(--color-yellow-600); |
to-lime-400 | --m-gradient-to: var(--color-lime-400); |
to-lime-500 | --m-gradient-to: var(--color-lime-500); |
to-lime-600 | --m-gradient-to: var(--color-lime-600); |
to-green-400 | --m-gradient-to: var(--color-green-400); |
to-green-500 | --m-gradient-to: var(--color-green-500); |
to-green-600 | --m-gradient-to: var(--color-green-600); |
to-emerald-400 | --m-gradient-to: var(--color-emerald-400); |
to-emerald-500 | --m-gradient-to: var(--color-emerald-500); |
to-emerald-600 | --m-gradient-to: var(--color-emerald-600); |
to-teal-400 | --m-gradient-to: var(--color-teal-400); |
to-teal-500 | --m-gradient-to: var(--color-teal-500); |
to-teal-600 | --m-gradient-to: var(--color-teal-600); |
to-cyan-400 | --m-gradient-to: var(--color-cyan-400); |
to-cyan-500 | --m-gradient-to: var(--color-cyan-500); |
to-cyan-600 | --m-gradient-to: var(--color-cyan-600); |
to-sky-400 | --m-gradient-to: var(--color-sky-400); |
to-sky-500 | --m-gradient-to: var(--color-sky-500); |
to-sky-600 | --m-gradient-to: var(--color-sky-600); |
to-blue-400 | --m-gradient-to: var(--color-blue-400); |
to-blue-500 | --m-gradient-to: var(--color-blue-500); |
to-blue-600 | --m-gradient-to: var(--color-blue-600); |
to-indigo-400 | --m-gradient-to: var(--color-indigo-400); |
to-indigo-500 | --m-gradient-to: var(--color-indigo-500); |
to-indigo-600 | --m-gradient-to: var(--color-indigo-600); |
to-violet-400 | --m-gradient-to: var(--color-violet-400); |
to-violet-500 | --m-gradient-to: var(--color-violet-500); |
to-violet-600 | --m-gradient-to: var(--color-violet-600); |
to-purple-400 | --m-gradient-to: var(--color-purple-400); |
to-purple-500 | --m-gradient-to: var(--color-purple-500); |
to-purple-600 | --m-gradient-to: var(--color-purple-600); |
to-fuchsia-400 | --m-gradient-to: var(--color-fuchsia-400); |
to-fuchsia-500 | --m-gradient-to: var(--color-fuchsia-500); |
to-fuchsia-600 | --m-gradient-to: var(--color-fuchsia-600); |
to-pink-400 | --m-gradient-to: var(--color-pink-400); |
to-pink-500 | --m-gradient-to: var(--color-pink-500); |
to-pink-600 | --m-gradient-to: var(--color-pink-600); |
to-rose-400 | --m-gradient-to: var(--color-rose-400); |
to-rose-500 | --m-gradient-to: var(--color-rose-500); |
to-rose-600 | --m-gradient-to: var(--color-rose-600); |
to-slate | --m-gradient-to: color-mix(in oklab, var(--color-slate-400) calc(var(--mode) * 100%), var(--color-slate-500)); |
to-gray | --m-gradient-to: color-mix(in oklab, var(--color-gray-400) calc(var(--mode) * 100%), var(--color-gray-500)); |
to-zinc | --m-gradient-to: color-mix(in oklab, var(--color-zinc-400) calc(var(--mode) * 100%), var(--color-zinc-500)); |
to-neutral | --m-gradient-to: color-mix(in oklab, var(--color-neutral-400) calc(var(--mode) * 100%), var(--color-neutral-500)); |
to-stone | --m-gradient-to: color-mix(in oklab, var(--color-stone-400) calc(var(--mode) * 100%), var(--color-stone-500)); |
to-red | --m-gradient-to: color-mix(in oklab, var(--color-red-400) calc(var(--mode) * 100%), var(--color-red-500)); |
to-orange | --m-gradient-to: color-mix(in oklab, var(--color-orange-400) calc(var(--mode) * 100%), var(--color-orange-500)); |
to-amber | --m-gradient-to: color-mix(in oklab, var(--color-amber-400) calc(var(--mode) * 100%), var(--color-amber-500)); |
to-yellow | --m-gradient-to: color-mix(in oklab, var(--color-yellow-400) calc(var(--mode) * 100%), var(--color-yellow-500)); |
to-lime | --m-gradient-to: color-mix(in oklab, var(--color-lime-400) calc(var(--mode) * 100%), var(--color-lime-500)); |
to-green | --m-gradient-to: color-mix(in oklab, var(--color-green-400) calc(var(--mode) * 100%), var(--color-green-500)); |
to-emerald | --m-gradient-to: color-mix(in oklab, var(--color-emerald-400) calc(var(--mode) * 100%), var(--color-emerald-500)); |
to-teal | --m-gradient-to: color-mix(in oklab, var(--color-teal-400) calc(var(--mode) * 100%), var(--color-teal-500)); |
to-cyan | --m-gradient-to: color-mix(in oklab, var(--color-cyan-400) calc(var(--mode) * 100%), var(--color-cyan-500)); |
to-sky | --m-gradient-to: color-mix(in oklab, var(--color-sky-400) calc(var(--mode) * 100%), var(--color-sky-500)); |
to-blue | --m-gradient-to: color-mix(in oklab, var(--color-blue-400) calc(var(--mode) * 100%), var(--color-blue-500)); |
to-indigo | --m-gradient-to: color-mix(in oklab, var(--color-indigo-400) calc(var(--mode) * 100%), var(--color-indigo-500)); |
to-violet | --m-gradient-to: color-mix(in oklab, var(--color-violet-400) calc(var(--mode) * 100%), var(--color-violet-500)); |
to-purple | --m-gradient-to: color-mix(in oklab, var(--color-purple-400) calc(var(--mode) * 100%), var(--color-purple-500)); |
to-fuchsia | --m-gradient-to: color-mix(in oklab, var(--color-fuchsia-400) calc(var(--mode) * 100%), var(--color-fuchsia-500)); |
to-pink | --m-gradient-to: color-mix(in oklab, var(--color-pink-400) calc(var(--mode) * 100%), var(--color-pink-500)); |
to-rose | --m-gradient-to: color-mix(in oklab, var(--color-rose-400) calc(var(--mode) * 100%), var(--color-rose-500)); |
Background size 3
Variants: none
| Class | CSS |
|---|---|
bg-auto | background-size: auto; |
bg-cover | background-size: cover; |
bg-contain | background-size: contain; |
Background position 5
Variants: none
| Class | CSS |
|---|---|
bg-center | background-position: center; |
bg-top | background-position: top; |
bg-bottom | background-position: bottom; |
bg-left | background-position: left; |
bg-right | background-position: right; |
Background repeat 2
Variants: none
| Class | CSS |
|---|---|
bg-repeat | background-repeat: repeat; |
bg-no-repeat | background-repeat: no-repeat; |
Background attachment 3
Variants: none
| Class | CSS |
|---|---|
bg-fixed | background-attachment: fixed; |
bg-local | background-attachment: local; |
bg-scroll | background-attachment: scroll; |
Background clip text 1
Variants: none
| Class | CSS |
|---|---|
bg-clip-text | -webkit-background-clip: text; background-clip: text; |
Background clip 2
Variants: none
| Class | CSS |
|---|---|
bg-clip-padding | background-clip: padding-box; |
bg-clip-border | background-clip: border-box; |