---
title: Gradients
description: Create smooth color transitions with linear, radial, and conic gradient utilities.
---

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.

```tsx
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:

```tsx
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:

```jsx
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.

```jsx
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`:

```jsx
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:

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