# 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 | 774320@0,B44819@25,F5F3C7@50,FD9A02@75,01928B@100 |
| angle | 135 |
| type | linear |

## HTML

```html
<div class="tv-gradient-background" role="img" aria-label="Custom gradient background" style="--tv-gradient-background-stops: #774320 0%, #B44819 25%, #F5F3C7 50%, #FD9A02 75%, #01928B 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)