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: 'in srgb',
  gradientFrom: 'blue.600',
  gradientTo: 'sky.400',
  gradientToPosition: '50%'
})
css({
  boxSize: '24',
  rounded: 'full',
  bgConic: 'from 180deg',
  gradientFrom: 'blue.600',
  gradientVia: 'blue.50',
  gradientTo: 'blue.600'
})
css({
  boxSize: '24',
  rounded: 'full',
  bgConic: 'in oklch decreasing hue',
  gradientFrom: 'violet.700',
  gradientVia: 'lime.300',
  gradientTo: 'violet.700'
})

Controlling color stops

Define which colors appear in your gradient using gradientFrom, gradientVia, and gradientTo:

css({
  bgLinear: 'to-r',
  gradientFrom: 'indigo.500',
  gradientVia: 'purple.500',
  gradientTo: 'pink.500'
})

Positioning color stops

Control exactly where each color appears along the gradient using position utilities:

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'
})

Custom gradient values

Use bracket notation to create gradients with arbitrary values:

css({
  bgLinear: '25deg',
  gradientFrom: 'red.50%',
  gradientVia: 'yellow.60%',
  gradientTo: 'lime.90%',
  gradientToPosition: 'teal.100%'
})

Responsive gradients

Apply different gradient styles at different breakpoints using responsive objects:

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