# Gradient background

Build a linear or radial gradient from a palette, or randomize its colors\.

- Kind: tool
- Category: misc
- Default background: light
- Use when: Hero backgrounds, cards, banners, and decorative surfaces\.
- Avoid when: Behind long passages without checking text contrast\.
- Requires: None
- Credit: [thuvien](https://thuvien.org)
- License: MIT

## Settings

| Parameter | Value |
| --- | --- |
| stops | 638A55@0,9BBA74@20,CDDB86@40,FCE7B2@60,E1B083@80,C48D60@100 |
| angle | 135 |
| type | linear |

## HTML

```html
<div class="tv-gradient-background" role="img" aria-label="Custom gradient background" style="--tv-gradient-background-stops: #638A55 0%, #9BBA74 20%, #CDDB86 40%, #FCE7B2 60%, #E1B083 80%, #C48D60 100%; --tv-gradient-background-angle: 135deg; --tv-gradient-background-type: linear-gradient(var(--tv-gradient-background-angle, 135deg), var(--tv-gradient-background-stops, #FB7185 0%, #FBBF24 100%));"></div>
```

## CSS

```css
.tv-gradient-background {
  box-sizing: border-box;
  min-height: 16rem;
  width: 100%;
  border-radius: 0.75rem;
  background-image: var(--tv-gradient-background-type, linear-gradient(var(--tv-gradient-background-angle, 135deg), var(--tv-gradient-background-stops, #FB7185 0%, #FBBF24 100%)));
}
```

## Params

| Parameter | Type | Default | Range or options |
| --- | --- | --- | --- |
| stops | stops | FB7185@0,FBBF24@100 | 2 to 8 colors, optional positions 0 to 100 |
| angle | range | 135 | 0 to 360; step 1 |
| type | select | linear | linear, radial |

## Presets

- [Sunset](https://thuvien.org/ui/tools/gradient-background?preset=sunset)
- [Ocean](https://thuvien.org/ui/tools/gradient-background?preset=ocean)
- [Aurora](https://thuvien.org/ui/tools/gradient-background?preset=aurora)