# 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 | 23330E@0,3C5718@25,678E34@50,A2CA6C@75,C7DFA7@100 |
| angle | 135 |
| type | linear |

## HTML

```html
<div class="tv-gradient-background" role="img" aria-label="Custom gradient background" style="--tv-gradient-background-stops: #23330E 0%, #3C5718 25%, #678E34 50%, #A2CA6C 75%, #C7DFA7 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)