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