Expand description
Utilities for controlling an element’s background image.
| Class | Properties | Preview |
|---|---|---|
| bg-none | background-image: none; | |
| bg-gradient-to-t | background-image: linear-gradient(to top in oklab, var(--en-gradient-stops)); | |
| bg-gradient-to-tr | background-image: linear-gradient(to top right in oklab, var(--en-gradient-stops)); | |
| bg-gradient-to-r | background-image: linear-gradient(to right in oklab, var(--en-gradient-stops)); | |
| bg-gradient-to-br | background-image: linear-gradient(to bottom right in oklab, var(--en-gradient-stops)); | |
| bg-gradient-to-b | background-image: linear-gradient(to bottom in oklab, var(--en-gradient-stops)); | |
| bg-gradient-to-bl | background-image: linear-gradient(to bottom left in oklab, var(--en-gradient-stops)); | |
| bg-gradient-to-l | background-image: linear-gradient(to left in oklab, var(--en-gradient-stops)); | |
| bg-gradient-to-tl | background-image: linear-gradient(to top left in oklab, var(--en-gradient-stops)); | |
| bg-linear-to-t | background-image: linear-gradient(to top in oklab, var(--en-gradient-stops)); | |
| bg-linear-to-tr | background-image: linear-gradient(to top right in oklab, var(--en-gradient-stops)); | |
| bg-linear-to-r | background-image: linear-gradient(to right in oklab, var(--en-gradient-stops)); | |
| bg-linear-to-br | background-image: linear-gradient(to bottom right in oklab, var(--en-gradient-stops)); | |
| bg-linear-to-b | background-image: linear-gradient(to bottom in oklab, var(--en-gradient-stops)); | |
| bg-linear-to-bl | background-image: linear-gradient(to bottom left in oklab, var(--en-gradient-stops)); | |
| bg-linear-to-l | background-image: linear-gradient(to left in oklab, var(--en-gradient-stops)); | |
| bg-linear-to-tl | background-image: linear-gradient(to top left in oklab, var(--en-gradient-stops)); | |
| bg-linear-<integer> | background-image: linear-gradient(<integer>deg in oklab, var(--en-gradient-stops)); | |
| bg-radial | background-image: radial-gradient(in oklab, var(--en-gradient-stops)); | |
| bg-conic | background-image: conic-gradient(in oklab, var(--en-gradient-stops)); | |
| bg-conic-<integer> | background-image: conic-gradient(from <integer>deg in oklab, var(--en-gradient-stops)); |
§Interpolation modes
You can choose the interpolation mode used by each background having a gradient by prefixing the class with /<interpolation_mode>, e.g bg-linear-to-r/hsl or bg-radial/increasing.
The following interpolation modes are available:
| Interpolation mode | CSS argument used | Preview |
|---|---|---|
| srgb | srgb | |
| hsl | hsl | |
| oklab | oklab | |
| oklch | oklch | |
| longer | oklch longer hue | |
| shorter | oklch shorter hue | |
| increasing | oklch increasing hue | |
| decreasing | oklch decreasing hue |
§Arbitrary values
Any <image> property is allowed as arbitrary value for bg-.
For example, bg-[url('/hello.png')].
Any property is allowed as arbitrary value for bg-linear-.
For example, bg-linear-[to_bottom_#fff,#000].
Any property is allowed as arbitrary value for bg-radial-.
For example, bg-radial-[at_25%_25%].
Any property is allowed as arbitrary value for bg-conic-.
For example, bg-conic-[from_22deg_in_oklab,#fff,#000].
Because the default scanner splits by some special characters, you must use the following escape codes in arbitrary values:
"for"'for'(for()for)[for[\for\]for]_for_(because by default_is replaced by a space in arbitrary values, so_prevents this behavior)`for`