bg-[<value>] arbitrary background image
Use bg-[<value>] to set an arbitrary background image value. This outputs background-image: <value>;
Tailwind CSS v4 · all subjects
utilities/background-image
29 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
bg-(image:<custom-property>) custom property reference
Use bg-(image:<custom-property>) to reference a custom CSS property for background image. This outputs background-image: var(<custom-property>);
bg-none removes background image
Use bg-none to remove an existing background image from an element. This outputs background-image: none;
Linear gradient direction utilities
Tailwind v4 provides these linear gradient direction utilities: bg-linear-to-t (to top), bg-linear-to-tr (to top right), bg-linear-to-r (to right), bg-linear-to-br (to bottom right), bg-linear-to-b (to bottom), bg-linear-to-bl (to bottom left), bg-linear-to-l (to left), and bg-linear-to-tl (to top left). Each uses var(--tw-gradient-stops) for color stops.
bg-linear-<angle> with angle degree
Use bg-linear-<angle> to create a linear gradient at a specific angle, such as bg-linear-65. This outputs background-image: linear-gradient(<angle> in oklab, var(--tw-gradient-stops));. Use -bg-linear-<angle> with a negative angle.
bg-linear-(<custom-property>) linear gradient with custom property
Use bg-linear-(<custom-property>) to reference a custom CSS property for a linear gradient. This outputs background-image: linear-gradient(var(--tw-gradient-stops, var(<custom-property>)));
bg-linear-[<value>] arbitrary linear gradient
Use bg-linear-[<value>] to set an arbitrary linear gradient value. This outputs background-image: linear-gradient(var(--tw-gradient-stops, <value>));
bg-radial basic radial gradient
Use bg-radial to create a basic radial gradient. This outputs background-image: radial-gradient(in oklab, var(--tw-gradient-stops));
bg-radial-[<position>] radial gradient with position
Use bg-radial-[<position>] to control the position of a radial gradient, such as bg-radial-[at_50%_75%]. Position values are specified using at_<x>_<y> syntax inside brackets.
bg-radial-(<custom-property>) radial gradient with custom property
Use bg-radial-(<custom-property>) to reference a custom CSS property for a radial gradient. This outputs background-image: radial-gradient(var(--tw-gradient-stops, var(<custom-property>)));
bg-radial-[<value>] arbitrary radial gradient
Use bg-radial-[<value>] to set an arbitrary radial gradient value. This outputs background-image: radial-gradient(var(--tw-gradient-stops, <value>));
bg-conic-<angle> conic gradient with angle
Use bg-conic-<angle> to create a conic gradient starting from a specific angle, such as bg-conic-180. This outputs background-image: conic-gradient(from <angle> in oklab, var(--tw-gradient-stops));. Use -bg-conic-<angle> with a negative angle.
bg-conic basic conic gradient
Use bg-conic to create a basic conic gradient. This outputs background-image: conic-gradient(from 0deg in oklab, var(--tw-gradient-stops));
bg-conic-(<custom-property>) conic gradient with custom property
Use bg-conic-(<custom-property>) to reference a custom CSS property for a conic gradient. This outputs background-image: var(<custom-property>);
bg-conic-[<value>] arbitrary conic gradient
Use bg-conic-[<value>] to set an arbitrary conic gradient value. This outputs background-image: <value>;
from-<color> sets gradient start color
Use from-<color> to set the starting color of a gradient, such as from-indigo-500. This outputs --tw-gradient-from: <color>;
from-<percentage> sets gradient start position
Use from-<percentage> to set the starting position of a gradient, such as from-10%. This outputs --tw-gradient-from-position: <percentage>;
from-(<custom-property>) gradient color from custom property
Use from-(<custom-property>) to reference a custom CSS property for the gradient start color. This outputs --tw-gradient-from: var(<custom-property>);
from-[<value>] arbitrary gradient start color
Use from-[<value>] to set an arbitrary gradient start color. This outputs --tw-gradient-from: <value>;
via-<color> sets gradient middle color
Use via-<color> to set the middle color of a gradient, such as via-purple-500. This outputs --tw-gradient-via: <color>;
via-<percentage> sets gradient middle position
Use via-<percentage> to set the middle position of a gradient, such as via-30%. This outputs --tw-gradient-via-position: <percentage>;
via-(<custom-property>) gradient color via custom property
Use via-(<custom-property>) to reference a custom CSS property for the gradient middle color. This outputs --tw-gradient-via: var(<custom-property>);
via-[<value>] arbitrary gradient middle color
Use via-[<value>] to set an arbitrary gradient middle color. This outputs --tw-gradient-via: <value>;
to-<color> sets gradient end color
Use to-<color> to set the ending color of a gradient, such as to-pink-500. This outputs --tw-gradient-to: <color>;
to-<percentage> sets gradient end position
Use to-<percentage> to set the ending position of a gradient, such as to-90%. This outputs --tw-gradient-to-position: <percentage>;
to-(<custom-property>) gradient color to custom property
Use to-(<custom-property>) to reference a custom CSS property for the gradient end color. This outputs --tw-gradient-to: var(<custom-property>);
to-[<value>] arbitrary gradient end color
Use to-[<value>] to set an arbitrary gradient end color. This outputs --tw-gradient-to: <value>;
Gradient interpolation modifiers
Gradients support interpolation modifiers using the slash syntax: /srgb, /hsl, /oklab, /oklch, /longer, /shorter, /increasing, and /decreasing. By default gradients are interpolated in the oklab color space. Example: bg-linear-to-r/srgb uses sRGB interpolation.
Gradient color stops example in v3.3
```html <div class="bg-gradient-to-r from-indigo-500 from-10% via-purple-500 via-30% to-pink-500 to-90% ..."> <!-- ... --> </div> ``` Use arbitrary values for custom percentages: ```html <div class="bg-gradient-to-r from-cyan-400 from-[21.56%] ..."> <!-- ... --> </div> ```