Skip to content
Visuals and effects

background

Defines an element's complete background in one declaration: color, image, gradient, position, size, repeat behavior, attachment, and clipping area.

7,917 effects in the catalog use this property.

Syntax

background: <color> <image> <position> / <size> <repeat> <attachment> <clip>;

Watch out

The shorthand resets every omitted background subproperty to its initial value. Use `background-color` when you only want to change the color; writing `background` can remove an existing gradient.

Common values

#0b1018
Solid color
linear-gradient(90deg, #3b82f6, #8b5cf6)
Linear gradient
radial-gradient(circle at 50% 30%, #fff, #000)
Radial gradient expanding from a center point
conic-gradient(from 0deg, red, blue, red)
Conic gradient for rings and pie segments

Effects using background

These are working effects from the catalog. Open a tile to inspect the full source.