Backgrounds
Utilities for controlling an element's background image.
Class | Styles |
---|---|
bg-[<value>] | background-image: <value>; |
bg-(<custom-property>) | background-image: var(<custom-property>); |
bg-none | background-image: none; |
bg-linear-to-t | background-image: linear-gradient(to top, var(--tw-gradient-stops)); |
bg-linear-to-tr | background-image: linear-gradient(to top right, var(--tw-gradient-stops)); |
bg-linear-to-r | background-image: linear-gradient(to right, var(--tw-gradient-stops)); |
bg-linear-to-br | background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); |
bg-linear-to-b | background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); |
bg-linear-to-bl | background-image: linear-gradient(to bottom left, var(--tw-gradient-stops)); |
bg-linear-to-l | background-image: linear-gradient(to left, var(--tw-gradient-stops)); |
bg-linear-to-tl | background-image: linear-gradient(to top left, var(--tw-gradient-stops)); |
bg-linear-<angle> | background-image: linear-gradient(<angle> in oklab, var(--tw-gradient-stops)); |
-bg-linear-<angle> | background-image: linear-gradient(-<angle> in oklab, var(--tw-gradient-stops)); |
bg-linear-(<custom-property>) | background-image: linear-gradient(var(--tw-gradient-stops, var(<custom-property>))); |
bg-linear-[<value>] | background-image: linear-gradient(var(--tw-gradient-stops, <value>)); |
bg-radial | background-image: radial-gradient(in oklab, var(--tw-gradient-stops)); |
bg-radial-(<custom-property>) | background-image: radial-gradient(var(--tw-gradient-stops, var(<custom-property>))); |
bg-radial-[<value>] | background-image: radial-gradient(var(--tw-gradient-stops, <value>)); |
bg-conic-<angle> | background-image: conic-gradient(from <angle> in oklab, var(--tw-gradient-stops)); |
-bg-conic-<angle> | background-image: conic-gradient(from -<angle> in oklab, var(--tw-gradient-stops)); |
bg-conic-(<custom-property>) | background-image: var(<custom-property>); |
bg-conic-[<value>] | background-image: <image>; |
from-<color> | --tw-gradient-from: <color>; |
from-<percentage> | --tw-gradient-from-position: <percentage>; |
from-(<custom-property>) | --tw-gradient-from: var(<custom-property>); |
from-[<value>] | --tw-gradient-from: <value>; |
via-<color> | --tw-gradient-via: <color>; |
via-<percentage> | --tw-gradient-via-position: <percentage>; |
via-(<custom-property>) | --tw-gradient-via: var(<custom-property>); |
via-[<value>] | --tw-gradient-via: <value>; |
to-<color> | --tw-gradient-to: <color>; |
to-<percentage> | --tw-gradient-to-position: <percentage>; |
to-(<custom-property>) | --tw-gradient-to: var(<custom-property>); |
to-[<value>] | --tw-gradient-to: <value>; |
Use the bg-[<value>]
syntax to set the background image of an element:
Use utilities like bg-linear-to-r
and bg-linear-<angle>
with the color stop utilities to add a linear gradient to an element:
Use the bg-radial
and bg-radial-[<position>]
utilities with the color stop utilities to add a radial gradient to an element:
Use the bg-conic
and bg-conic-<angle>
utilities with the color stop utilities to add a conic gradient to an element:
Use utilities like from-indigo-500
, via-purple-500
, and to-pink-500
to set the colors of the gradient stops:
Use utilities like from-10%
, via-30%
, and to-90%
to set more precise positions for the gradient color stops:
Use the interpolation modifier to control the interpolation mode of a gradient:
By default gradients are interpolated in the oklab
color space.
Use the bg-none
utility to remove an existing background image from an element:
<div class="bg-none"></div>
Use utilities like bg-linear-[<value>]
and from-[<value>]
to set the gradient based on a completely custom value:
<div class="bg-linear-[25deg,red_5%,yellow_60%,lime_90%,teal] ..."> <!-- ... --></div>
For CSS variables, you can also use the bg-linear-(<custom-property>)
syntax:
<div class="bg-linear-(--my-gradient) ..."> <!-- ... --></div>
This is just a shorthand for bg-linear-[var(<custom-property>)]
that adds the var()
function for you automatically.
Prefix a background-image
utility with a breakpoint variant like md:
to only apply the utility at medium screen sizes and above:
<div class="from-purple-400 md:from-yellow-500 ..."> <!-- ... --></div>
Learn more about using variants in the variants documentation.
Use the --color-*
theme variables to customize the color utilities in your project:
@theme { --color-regal-blue: #243c5a; }
Now utilities like from-regal-blue
,via-regal-blue
, and to-regal-blue
can be used in your markup:
<div class="from-regal-blue"> <!-- ... --></div>
Learn more about customizing your theme in the theme documentation.