CSS Gradient Generator

Build a CSS gradient with a live preview. Pick linear or radial, stack two to eight colour stops, choose hex / rgb() / hsl() for the output, and copy the snippet. Eight presets to start from. Everything stays in your browser.

Preset

Sunset Ocean Mint Mono Rainbow Spotlight Peach Lavender

Gradient kind

Linear Radial

Angle deg Format Hex rgb() hsl()

Preview —

Stops

+ Add stop − Remove

Drag the position slider or type a number (0–100). Stops auto-sort by position.

CSS

Paste & parse Copy