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,#1d4ed80%,#7c3aed50%,#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