Gradients· new

CSS Gradient Generator

Linear, radial, conic — with draggable stops, live preview, and copyable CSS / Tailwind / SVG output.

Previewclick anywhere to add a stop
linear
Color stops
click to add · drag to reposition · 2 stops
Stops
#
%
#
%
Type
Angle
°
Output
styles.css
background: linear-gradient(135deg, #7C5CFF 0%, #F0B5FF 100%);
Presets

Twelve curated gradients to start from. Click any to load — then keep editing.