# 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 | D9ED92@0,B5E48C@14\.29,99D98C@28\.57,76C893@42\.86,52B69A@57\.14,34A0A4@71\.43,168AAD@85\.71,1A759F@100 |
| angle | 135 |
| type | linear |

## HTML

```html
<div class="tv-gradient-background" role="img" aria-label="Custom gradient background" style="--tv-gradient-background-stops: #D9ED92 0%, #B5E48C 14.29%, #99D98C 28.57%, #76C893 42.86%, #52B69A 57.14%, #34A0A4 71.43%, #168AAD 85.71%, #1A759F 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)