Backgrounds

background-image

Utilities for setting background images and gradients.

Quick reference

Background Conic

Class Styles

bg-conic

--sf-gradient-position: in oklab;
background-image: conic-gradient(var(--sf-gradient-stops));

bg-conic-<angle>

--sf-gradient-position: from <angle>deg in oklab;
background-image: conic-gradient(var(--sf-gradient-stops));

bg-conic-45

--sf-gradient-position: from 45deg in oklab;
background-image: conic-gradient(var(--sf-gradient-stops));

bg-conic-<angle>/<modifier>

--sf-gradient-position: from <angle>deg in <modifier>;
background-image: conic-gradient(var(--sf-gradient-stops));

bg-conic-45/srgb

--sf-gradient-position: from 45deg in srgb;
background-image: conic-gradient(var(--sf-gradient-stops));

bg-conic-[<value>]

--sf-gradient-position: <value>;
background-image: conic-gradient(var(--sf-gradient-stops));

bg-conic-[45deg]

--sf-gradient-position: 45deg;
background-image: conic-gradient(var(--sf-gradient-stops));

bg-conic-(<custom-property>)

--sf-gradient-position: var(<custom-property>);
background-image: conic-gradient(var(--sf-gradient-stops));

bg-conic-(--my-angle)

--sf-gradient-position: var(--my-angle);
background-image: conic-gradient(var(--sf-gradient-stops));

bg-conic-(angle:<custom-property>)

--sf-gradient-position: var(<custom-property>);
background-image: conic-gradient(var(--sf-gradient-stops));

bg-conic-(angle:--my-angle)

--sf-gradient-position: var(--my-angle);
background-image: conic-gradient(var(--sf-gradient-stops));

-bg-conic-<angle>

--sf-gradient-position: from -<angle>deg in oklab;
background-image: conic-gradient(var(--sf-gradient-stops));

-bg-conic-45

--sf-gradient-position: from -45deg in oklab;
background-image: conic-gradient(var(--sf-gradient-stops));

-bg-conic-<angle>/<modifier>

--sf-gradient-position: from -<angle>deg in <modifier>;
background-image: conic-gradient(var(--sf-gradient-stops));

-bg-conic-45/srgb

--sf-gradient-position: from -45deg in srgb;
background-image: conic-gradient(var(--sf-gradient-stops));

Background Image

Class Styles

bg-none

background-image: none;

bg-[<url>]

background-image: <url>;

bg-[/images/logo.jpg]

background-image: url("/images/logo.jpg");

bg-(<custom-property>)

background-image: var(<custom-property>);

bg-(--my-image)

background-image: var(--my-image);

bg-(url:<custom-property>)

background-image: var(<custom-property>);

bg-(url:--my-image)

background-image: var(--my-image);

Background Linear

Class Styles

bg-linear-to-t

--sf-gradient-position: to top;
background-image: linear-gradient(var(--sf-gradient-stops));
@supports (background-image:linear-gradient(in lab, red, red)) {
    --sf-gradient-position: to top in oklab;
}

bg-linear-to-tr

--sf-gradient-position: to top right;
background-image: linear-gradient(var(--sf-gradient-stops));
@supports (background-image:linear-gradient(in lab, red, red)) {
    --sf-gradient-position: to top right in oklab;
}

bg-linear-to-r

--sf-gradient-position: to right;
background-image: linear-gradient(var(--sf-gradient-stops));
@supports (background-image:linear-gradient(in lab, red, red)) {
    --sf-gradient-position: to right in oklab;
}

bg-linear-to-br

--sf-gradient-position: to bottom right;
background-image: linear-gradient(var(--sf-gradient-stops));
@supports (background-image:linear-gradient(in lab, red, red)) {
    --sf-gradient-position: to bottom right in oklab;
}

bg-linear-to-b

--sf-gradient-position: to bottom;
background-image: linear-gradient(var(--sf-gradient-stops));
@supports (background-image:linear-gradient(in lab, red, red)) {
    --sf-gradient-position: to bottom in oklab;
}

bg-linear-to-bl

--sf-gradient-position: to bottom left;
background-image: linear-gradient(var(--sf-gradient-stops));
@supports (background-image:linear-gradient(in lab, red, red)) {
    --sf-gradient-position: to bottom left in oklab;
}

bg-linear-to-l

--sf-gradient-position: to left;
background-image: linear-gradient(var(--sf-gradient-stops));
@supports (background-image:linear-gradient(in lab, red, red)) {
    --sf-gradient-position: to left in oklab;
}

bg-linear-to-tl

--sf-gradient-position: to top left;
background-image: linear-gradient(var(--sf-gradient-stops));
@supports (background-image:linear-gradient(in lab, red, red)) {
    --sf-gradient-position: to top left in oklab;
}

bg-linear-<angle>

--sf-gradient-position: <angle>deg;
background-image: linear-gradient(var(--sf-gradient-stops));
@supports (background-image:linear-gradient(in lab, red, red)) {
    --sf-gradient-position: <angle>deg in oklab;
}

bg-linear-45

--sf-gradient-position: 45deg;
background-image: linear-gradient(var(--sf-gradient-stops));
@supports (background-image:linear-gradient(in lab, red, red)) {
    --sf-gradient-position: 45deg in oklab;
}

bg-linear-<angle>/<modifier>

--sf-gradient-position: <angle>deg;
background-image: linear-gradient(var(--sf-gradient-stops));
@supports (background-image:linear-gradient(in lab, red, red)) {
    --sf-gradient-position: <angle>deg in <modifier>;
}

bg-linear-45/srgb

--sf-gradient-position: 45deg;
background-image: linear-gradient(var(--sf-gradient-stops));
@supports (background-image:linear-gradient(in lab, red, red)) {
    --sf-gradient-position: 45deg in srgb;
}

bg-linear-[<value>]

background-image: linear-gradient(var(--sf-gradient-stops, <value>))

bg-linear-[45deg]

background-image: linear-gradient(var(--sf-gradient-stops, 45deg))

bg-linear-(<custom-property>)

background-image: linear-gradient(var(--sf-gradient-stops, var(<custom-property>)))

bg-linear-(--my-angle)

background-image: linear-gradient(var(--sf-gradient-stops, var(--my-angle)))

bg-linear-(angle:<custom-property>)

background-image: linear-gradient(var(--sf-gradient-stops, var(<custom-property>)))

bg-linear-(angle:--my-angle)

background-image: linear-gradient(var(--sf-gradient-stops, var(--my-angle)))

-bg-linear-<angle>

--sf-gradient-position: -<angle>deg;
background-image: linear-gradient(var(--sf-gradient-stops));
@supports (background-image:linear-gradient(in lab, red, red)) {
    --sf-gradient-position: -<angle>deg in oklab;
}

-bg-linear-45

--sf-gradient-position: -45deg;
background-image: linear-gradient(var(--sf-gradient-stops));
@supports (background-image:linear-gradient(in lab, red, red)) {
    --sf-gradient-position: -45deg in oklab;
}

-bg-linear-<angle>/<modifier>

--sf-gradient-position: -<angle>deg;
background-image: linear-gradient(var(--sf-gradient-stops));
@supports (background-image:linear-gradient(in lab, red, red)) {
    --sf-gradient-position: -<angle>deg in <modifier>;
}

-bg-linear-45/srgb

--sf-gradient-position: -45deg;
background-image: linear-gradient(var(--sf-gradient-stops));
@supports (background-image:linear-gradient(in lab, red, red)) {
    --sf-gradient-position: -45deg in srgb;
}

Background Radial

Class Styles

bg-radial

--sf-gradient-position: in oklab;
background-image: radial-gradient(var(--sf-gradient-stops));

bg-radial-[<value>]

--sf-gradient-position: <value>;
background-image: radial-gradient(var(--sf-gradient-stops, <value>));

bg-radial-[initial]

--sf-gradient-position: initial;
background-image: radial-gradient(var(--sf-gradient-stops, initial));

bg-radial-(<custom-property>)

--sf-gradient-position: var(<custom-property>);
background-image: radial-gradient(var(--sf-gradient-stops, var(<custom-property>)));

bg-radial-(--my-value)

--sf-gradient-position: var(--my-value);
background-image: radial-gradient(var(--sf-gradient-stops, var(--my-value)));

From Color

Class Styles

from-<color-name>

--sf-gradient-from: <value>;
--sf-gradient-stops: var(--sf-gradient-via-stops, var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-to) var(--sf-gradient-to-position));/* #0000, 0%, #0000, 100% */

from-red-500

--sf-gradient-from: var(--color-red-500);
--sf-gradient-stops: var(--sf-gradient-via-stops, var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-to) var(--sf-gradient-to-position));

from-<color-name>/<opacity>

--sf-gradient-from: <value>;
--sf-gradient-stops: var(--sf-gradient-via-stops, var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-to) var(--sf-gradient-to-position));/* #0000, 0%, #0000, 100% */

from-red-500/42

--sf-gradient-from: color-mix(in oklab, var(--color-red-500) 42%, transparent);
--sf-gradient-stops: var(--sf-gradient-via-stops, var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-to) var(--sf-gradient-to-position));

from-[<value>]

--sf-gradient-from: <value>;
--sf-gradient-stops: var(--sf-gradient-via-stops, var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-to) var(--sf-gradient-to-position));/* #0000, 0%, #0000, 100% */

from-[#ff0000]

--sf-gradient-from: #ff0000;
--sf-gradient-stops: var(--sf-gradient-via-stops, var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-to) var(--sf-gradient-to-position));

from-[<value>]/<opacity>

--sf-gradient-from: <value>;
--sf-gradient-stops: var(--sf-gradient-via-stops, var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-to) var(--sf-gradient-to-position));/* #0000, 0%, #0000, 100% */

from-[#ff0000]/42

--sf-gradient-from: rgba(255,0,0,0.42);
--sf-gradient-stops: var(--sf-gradient-via-stops, var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-to) var(--sf-gradient-to-position));

from-(<custom-property>)

--sf-gradient-from: var(<custom-property>);
--sf-gradient-stops: var(--sf-gradient-via-stops, var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-to) var(--sf-gradient-to-position));/* #0000, 0%, #0000, 100% */

from-(--my-color)

--sf-gradient-from: var(--my-color);
--sf-gradient-stops: var(--sf-gradient-via-stops, var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-to) var(--sf-gradient-to-position));

from-(color:<custom-property>)

--sf-gradient-from: var(<custom-property>);
--sf-gradient-stops: var(--sf-gradient-via-stops, var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-to) var(--sf-gradient-to-position));/* #0000, 0%, #0000, 100% */

from-(color:--my-color)

--sf-gradient-from: var(--my-color);
--sf-gradient-stops: var(--sf-gradient-via-stops, var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-to) var(--sf-gradient-to-position));

From Percentage

Class Styles

from-<percentage>

--sf-gradient-from-position: <percentage>;

from-42%

--sf-gradient-from-position: 42%;

from-[<value>]

--sf-gradient-from-position: <value>;

from-[42%]

--sf-gradient-from-position: 42%;

from-(<custom-property>)

--sf-gradient-from-position: var(<custom-property>);

from-(--my-percentage)

--sf-gradient-from-position: var(--my-percentage);

from-(percentage:<custom-property>)

--sf-gradient-from-position: var(<custom-property>);

from-(percentage:--my-percentage)

--sf-gradient-from-position: var(--my-percentage);

To Color

Class Styles

to-<color-name>

--sf-gradient-to: <value>;
--sf-gradient-stops: var(--sf-gradient-via-stops, var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-to) var(--sf-gradient-to-position))/* #0000, 0%, #0000, 100% */

to-red-500

--sf-gradient-to: var(--color-red-500);
--sf-gradient-stops: var(--sf-gradient-via-stops, var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-to) var(--sf-gradient-to-position))

to-<color-name>/<opacity>

--sf-gradient-to: <value>;
--sf-gradient-stops: var(--sf-gradient-via-stops, var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-to) var(--sf-gradient-to-position))/* #0000, 0%, #0000, 100% */

to-red-500/42

--sf-gradient-to: color-mix(in oklab, var(--color-red-500) 42%, transparent);
--sf-gradient-stops: var(--sf-gradient-via-stops, var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-to) var(--sf-gradient-to-position))

to-[<value>]

--sf-gradient-to: <value>;
--sf-gradient-stops: var(--sf-gradient-via-stops, var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-to) var(--sf-gradient-to-position))/* #0000, 0%, #0000, 100% */

to-[#ff0000]

--sf-gradient-to: #ff0000;
--sf-gradient-stops: var(--sf-gradient-via-stops, var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-to) var(--sf-gradient-to-position))

to-[<value>]/<opacity>

--sf-gradient-to: <value>;
--sf-gradient-stops: var(--sf-gradient-via-stops, var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-to) var(--sf-gradient-to-position))/* #0000, 0%, #0000, 100% */

to-[#ff0000]/42

--sf-gradient-to: rgba(255,0,0,0.42);
--sf-gradient-stops: var(--sf-gradient-via-stops, var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-to) var(--sf-gradient-to-position))

to-(<custom-property>)

--sf-gradient-to: var(<custom-property>);
--sf-gradient-stops: var(--sf-gradient-via-stops, var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-to) var(--sf-gradient-to-position))/* #0000, 0%, #0000, 100% */

to-(--my-color)

--sf-gradient-to: var(--my-color);
--sf-gradient-stops: var(--sf-gradient-via-stops, var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-to) var(--sf-gradient-to-position))

to-(color:<custom-property>)

--sf-gradient-to: var(<custom-property>);
--sf-gradient-stops: var(--sf-gradient-via-stops, var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-to) var(--sf-gradient-to-position))/* #0000, 0%, #0000, 100% */

to-(color:--my-color)

--sf-gradient-to: var(--my-color);
--sf-gradient-stops: var(--sf-gradient-via-stops, var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-to) var(--sf-gradient-to-position))

To Percentage

Class Styles

to-<percentage>

--sf-gradient-to-position: <percentage>;

to-42%

--sf-gradient-to-position: 42%;

to-[<value>]

--sf-gradient-to-position: <value>;

to-[42%]

--sf-gradient-to-position: 42%;

to-(<custom-property>)

--sf-gradient-to-position: var(<custom-property>);

to-(--my-percentage)

--sf-gradient-to-position: var(--my-percentage);

to-(percentage:<custom-property>)

--sf-gradient-to-position: var(<custom-property>);

to-(percentage:--my-percentage)

--sf-gradient-to-position: var(--my-percentage);

Via Color

Class Styles

via-<color-name>

--sf-gradient-via: <value>;
--sf-gradient-via-stops: var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-via) var(--sf-gradient-via-position), var(--sf-gradient-to) var(--sf-gradient-to-position);/* #0000, 0%, #0000, 50%, #0000, 100% */
--sf-gradient-stops: var(--sf-gradient-via-stops);

via-red-500

--sf-gradient-via: var(--color-red-500);
--sf-gradient-via-stops: var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-via) var(--sf-gradient-via-position), var(--sf-gradient-to) var(--sf-gradient-to-position);
--sf-gradient-stops: var(--sf-gradient-via-stops);

via-<color-name>/<opacity>

--sf-gradient-via: <value>;
--sf-gradient-via-stops: var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-via) var(--sf-gradient-via-position), var(--sf-gradient-to) var(--sf-gradient-to-position);/* #0000, 0%, #0000, 50%, #0000, 100% */
--sf-gradient-stops: var(--sf-gradient-via-stops);

via-red-500/42

--sf-gradient-via: color-mix(in oklab, var(--color-red-500) 42%, transparent);
--sf-gradient-via-stops: var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-via) var(--sf-gradient-via-position), var(--sf-gradient-to) var(--sf-gradient-to-position);
--sf-gradient-stops: var(--sf-gradient-via-stops);

via-[<value>]

--sf-gradient-via: <value>;
--sf-gradient-via-stops: var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-via) var(--sf-gradient-via-position), var(--sf-gradient-to) var(--sf-gradient-to-position);/* #0000, 0%, #0000, 50%, #0000, 100% */
--sf-gradient-stops: var(--sf-gradient-via-stops);

via-[#ff0000]

--sf-gradient-via: #ff0000;
--sf-gradient-via-stops: var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-via) var(--sf-gradient-via-position), var(--sf-gradient-to) var(--sf-gradient-to-position);
--sf-gradient-stops: var(--sf-gradient-via-stops);

via-[<value>]/<opacity>

--sf-gradient-via: <value>;
--sf-gradient-via-stops: var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-via) var(--sf-gradient-via-position), var(--sf-gradient-to) var(--sf-gradient-to-position);/* #0000, 0%, #0000, 50%, #0000, 100% */
--sf-gradient-stops: var(--sf-gradient-via-stops);

via-[#ff0000]/42

--sf-gradient-via: rgba(255,0,0,0.42);
--sf-gradient-via-stops: var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-via) var(--sf-gradient-via-position), var(--sf-gradient-to) var(--sf-gradient-to-position);
--sf-gradient-stops: var(--sf-gradient-via-stops);

via-(<custom-property>)

--sf-gradient-via: var(<custom-property>);
--sf-gradient-via-stops: var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-via) var(--sf-gradient-via-position), var(--sf-gradient-to) var(--sf-gradient-to-position);/* #0000, 0%, #0000, 50%, #0000, 100% */
--sf-gradient-stops: var(--sf-gradient-via-stops);

via-(--my-color)

--sf-gradient-via: var(--my-color);
--sf-gradient-via-stops: var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-via) var(--sf-gradient-via-position), var(--sf-gradient-to) var(--sf-gradient-to-position);
--sf-gradient-stops: var(--sf-gradient-via-stops);

via-(color:<custom-property>)

--sf-gradient-via: var(<custom-property>);
--sf-gradient-via-stops: var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-via) var(--sf-gradient-via-position), var(--sf-gradient-to) var(--sf-gradient-to-position);/* #0000, 0%, #0000, 50%, #0000, 100% */
--sf-gradient-stops: var(--sf-gradient-via-stops);

via-(color:--my-color)

--sf-gradient-via: var(--my-color);
--sf-gradient-via-stops: var(--sf-gradient-position), var(--sf-gradient-from) var(--sf-gradient-from-position), var(--sf-gradient-via) var(--sf-gradient-via-position), var(--sf-gradient-to) var(--sf-gradient-to-position);
--sf-gradient-stops: var(--sf-gradient-via-stops);

Via Percentage

Class Styles

via-<percentage>

--sf-gradient-via-position: <percentage>;

via-42%

--sf-gradient-via-position: 42%;

via-[<value>]

--sf-gradient-via-position: <value>;

via-[42%]

--sf-gradient-via-position: 42%;

via-(<custom-property>)

--sf-gradient-via-position: var(<custom-property>);

via-(--my-percentage)

--sf-gradient-via-position: var(--my-percentage);

via-(percentage:<custom-property>)

--sf-gradient-via-position: var(<custom-property>);

via-(percentage:--my-percentage)

--sf-gradient-via-position: var(--my-percentage);

Examples

Linear gradients

Utilities like bg-linear-to-r and bg-linear-<angle> with color stop utilities can be used to add a linear gradient to an element:

<div class="grid md:grid-cols-2 gap-x-4 gap-y-4">
    <div class="h-10 rounded bg-linear-to-r from-cyan-300 to-blue-600"></div>
    <div class="h-10 rounded bg-linear-to-t from-cyan-300 to-blue-600"></div>
    <div class="h-10 rounded bg-linear-to-bl from-blue-600 to-cyan-300"></div>
    <div class="h-10 rounded bg-linear-85 from-blue-600 to-cyan-500"></div>
</div>

Radial gradients

Utilities like bg-radial and bg-radial-[<value>] with color stop utilities can be used to add a radial gradient to an element:

<div class="flex justify-around">
    <div class="size-18 rounded-full bg-radial from-amber-200 from-30% to-red-600 md:size-24"></div>
    <div class="size-18 rounded-full bg-radial-[at_50%_75%] from-cyan-300 via-blue-400 to-indigo-700 to-90% md:size-24"></div>
    <div class="size-18 rounded-full bg-radial-[at_25%_25%] from-white to-stone-900 to-75% md:size-24"></div>
</div>

Conic gradients

Utilities like bg-conic and bg-conic-<angle> with color stop utilities can be used to add a conic gradient to an element:

<div class="flex justify-around">
    <div class="size-18 rounded-full bg-conic from-blue-600 to-cyan-400 to-50% md:size-24"></div>
    <div class="size-18 rounded-full bg-conic-180 from-indigo-600 via-indigo-50 to-indigo-600 md:size-24"></div>
    <div class="size-18 rounded-full bg-conic/decreasing from-violet-700 via-lime-300 to-violet-700 md:size-24"></div>
</div>

Gradient Color Stops

Utilities like from-indigo-500, via-purple-500, and to-pink-500 can be used to set the colors of gradient stops:

<div class="relative h-10">
    <div class="absolute top-0 left-px flex h-10 flex-col items-center"><svg viewBox="0 0 30 34" class="w-8 flex-none fill-indigo-500 drop-shadow"><use href="#gradient-stop"></use></svg></div>
    <div class="absolute top-0 left-1/2 -ml-4 flex h-10 flex-col items-center"><svg viewBox="0 0 30 34" class="w-8 flex-none fill-purple-500 drop-shadow"><use href="#gradient-stop"></use></svg></div>
    <div class="absolute top-0 right-px flex h-10 flex-col items-center"><svg viewBox="0 0 30 34" class="w-8 flex-none fill-pink-500 drop-shadow"><use href="#gradient-stop"></use></svg></div>
</div>
<div class="h-10 rounded bg-linear-to-r from-indigo-500 via-purple-500 to-pink-500"></div>

Gradient Color Stop Positions

Utilities like from-10%, via-30%, and to-90% can be used to set more precise positions for gradient color stops:

10%

50%

90%

<div class="relative h-10">
    <div class="absolute top-0 left-[10%] -ml-4 flex h-10 flex-col items-center"><svg viewBox="0 0 32 34" class="w-8 flex-none fill-indigo-500 drop-shadow"><use href="#gradient-stop"></use></svg><div class="absolute top-0 left-0 flex h-7 w-full items-center justify-center font-mono text-[0.6875rem] font-semibold text-white">10%</div></div>
    <div class="absolute top-0 left-1/2 -ml-4 flex h-10 flex-col items-center"><svg viewBox="0 0 32 34" class="w-8 flex-none fill-sky-500 drop-shadow"><use href="#gradient-stop"></use></svg><div class="absolute top-0 left-0 flex h-7 w-full items-center justify-center font-mono text-[0.6875rem] font-semibold text-white">50%</div></div>
    <div class="absolute top-0 right-[10%] -mr-4 flex h-10 flex-col items-center"><svg viewBox="0 0 32 34" class="w-8 flex-none fill-emerald-500 drop-shadow"><use href="#gradient-stop"></use></svg><div class="absolute top-0 left-0 flex h-7 w-full items-center justify-center font-mono text-[0.6875rem] font-semibold text-white">90%</div></div>
</div>
<div class="h-10 rounded bg-linear-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90%"></div>

Gradient Color Interpolation Modes

Gradient interpolation modifiers can be specified to control the interpolation mode of a gradient:

srgb

hsl

oklab

oklch

longer

shorter

increasing

decreasing

<div class="grid md:grid-cols-2 gap-x-4 gap-y-4 text-sm">
    <div><p class="mb-2">srgb</p><div class="h-10 rounded bg-linear-to-r/srgb from-indigo-500 to-teal-400"></div></div>
    <div><p class="mb-2">hsl</p><div class="h-10 rounded bg-linear-to-r/hsl from-indigo-500 to-teal-400"></div></div>
    <div><p class="mb-2">oklab</p><div class="h-10 rounded bg-linear-to-r/oklab from-indigo-500 to-teal-400"></div></div>
    <div><p class="mb-2">oklch</p><div class="h-10 rounded bg-linear-to-r/oklch from-indigo-500 to-teal-400"></div></div>
    <div><p class="mb-2">longer</p><div class="h-10 rounded bg-linear-to-r/longer from-indigo-500 to-teal-400"></div></div>
    <div><p class="mb-2">shorter</p><div class="h-10 rounded bg-linear-to-r/shorter from-indigo-500 to-teal-400"></div></div>
    <div><p class="mb-2">increasing</p><div class="h-10 rounded bg-linear-to-r/increasing from-indigo-500 to-teal-400"></div></div>
    <div><p class="mb-2">decreasing</p><div class="h-10 rounded bg-linear-to-r/decreasing from-indigo-500 to-teal-400"></div></div>
</div>

Custom Gradients

Utilities like bg-linear-[<value>] can be used to create a gradient based on a custom value:

<div class="h-10 rounded bg-linear-[25deg,var(--color-red-600)_10%,var(--color-amber-600)_25%,var(--color-yellow-300)_45%,var(--color-lime-500)_70%,var(--color-sky-500)_90%]"></div>

background-color

background-origin

Backgrounds

background-image

Quick reference

Background Conic

Background Image

Background Linear

Background Radial

From Color

From Percentage

To Color

To Percentage

Via Color

Via Percentage

Examples

Linear gradients

Radial gradients

Conic gradients

Gradient Color Stops

Gradient Color Stop Positions

Gradient Color Interpolation Modes

Custom Gradients

Sfumato

Community