Gradients

Create smooth color transitions with linear, radial, and conic gradient utilities.

Property	Shorthand	CSS Property	Description
`backgroundLinear`	`bgLinear`	`background-image`	Apply linear gradient effects
`backgroundRadial`	`bgRadial`	`background-image`	Apply radial gradient effects
`backgroundConic`	`bgConic`	`background-image`	Apply conic gradient effects
`backgroundGradient`	`bgGradient`	`background-image`	Apply linear gradient (alias)
`textGradient`	-	`background-image`	Apply gradient to text
`gradientFrom`	-	`--gradient-from`	Define starting gradient color
`gradientTo`	-	`--gradient-to`	Define ending gradient color
`gradientVia`	-	`--gradient-via`	Define middle gradient color

Examples

Linear gradients

Use the bgLinear utility to create a linear gradient with a direction.

css({ bgLinear: 'to-r', gradientFrom: 'cyan.500', gradientTo: 'blue.500' })
css({ bgLinear: 'to-t', gradientFrom: 'sky.500', gradientTo: 'indigo.500' })
css({
  bgLinear: 'to-bl',
  gradientFrom: 'violet.500',
  gradientTo: 'fuchsia.500',
})
css({ bgLinear: '65deg', gradientFrom: 'purple.500', gradientTo: 'pink.500' })

Radial gradients

Build circular color transitions that radiate outward from a center point:

css({
  bgRadial: 'in srgb',
  gradientFrom: 'pink.400',
  gradientFromPosition: '40%',
  gradientTo: 'fuchsia.700',
})
css({
  bgRadial: 'at 50% 75%',
  gradientFrom: 'sky.200',
  gradientVia: 'blue.400',
  gradientTo: 'indigo.900',
  gradientToPosition: '90%',
})
css({
  bgRadial: 'at 25% 25%',
  gradientFrom: 'white',
  gradientTo: 'zinc.900',
  gradientToPosition: '75%',
})

Conic gradients

Create sweeping color transitions that rotate around a central point:

css({
  boxSize: '24',
  rounded: 'full',
  bgConic: 'from 180deg',
  gradientFrom: 'blue.600',
  gradientVia: 'blue.50',
  gradientTo: 'blue.600',
})

Color stops

gradientFrom, gradientVia and gradientTo set the colors; the matching *Position utilities take a length or percentage and place them along the gradient.

css({
  bgLinear: 'to-r',
  gradientFrom: 'indigo.500',
  gradientFromPosition: '10%',
  gradientVia: 'sky.500',
  gradientViaPosition: '30%',
  gradientTo: 'emerald.500',
  gradientToPosition: '90%',
})

Text gradients

Apply colorful gradient effects to typography using textGradient:

css({
  textGradient: 'to-r',
  gradientFrom: 'purple.400',
  gradientTo: 'pink.400',
  fontSize: '4xl',
  fontWeight: 'bold',
})

Responsive gradients

Apply different gradient styles at different breakpoints using responsive objects:

css({
  gradientFrom: { base: 'purple.400', md: 'yellow.500' },
})