# 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 | E8A2B8@0,A6C871@20,6A8A45@40,FFF8E7@60,F3C6D1@80,2F5847@100 |
| angle | 135 |
| type | linear |

## HTML

```html
<div class="tv-gradient-background" role="img" aria-label="Custom gradient background" style="--tv-gradient-background-stops: #E8A2B8 0%, #A6C871 20%, #6A8A45 40%, #FFF8E7 60%, #F3C6D1 80%, #2F5847 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)