Your files stay on your device

# CSS Gradient Builder: Linear, Radial, Conic

Linear, radial, and conic gradients with ordered stops, a live preview, CSS and Tailwind output, and PNG export.
linearradialconicfrom 135 °ResetAngle: 135 °

CSS

```
linear-gradient(135deg, #1d4ed8 0%, #7c3aed 50%, #ec4899 100%)
```

Tailwind arbitrary value

```
bg-[linear-gradient(135deg,#1d4ed8_0%,_#7c3aed_50%,_#ec4899_100%)]
```

Stops with alpha are flattened over white for the PNG and the copyable strings. CSS gradients composite against whatever sits behind them, and a downloaded PNG has no backdrop. Kind, angle, and the opaque 6-digit stop colors + positions ride the URL; alpha stops share as flattened hex.

1. 0 %✕
2. 50 %✕
3. 100 %✕
Add stop

## Next door in Color

- [Color Palette Generator](/color/palette)
- [Tint & Shade Generator](/color/shades)
[All color tools](/color)

---

Canonical HTML: https://nutter.tools/color/gradient
Markdown version: https://nutter.tools/color/gradient/index.md
Plain-text version: https://nutter.tools/color/gradient/index.txt
Agent index: https://nutter.tools/llms.txt