Free tool · no sign-in
CSS gradient generator
Drag the stops, set the angle, pick a preset. Copy CSS with a solid fallback, Tailwind classes or an SVG.
Color stops
Click the bar to add a stop. Drag a handle to move it, or drag it down off the bar to remove it. Focused handle: ←/→ moves, Delete removes.
Selected stop
%
Opacity 100%
Type & geometry
deg
Copy the code
gradient.css
background: #2A7B9B;
background: linear-gradient(90deg, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);Press C while the code is focused to copy.
Presets
Free account
Like it? Your account adds the full animation and pattern libraries in a kit
A kit is one line in your page, locked to your domains or IPs. It also unlocks the full galleries, favorites, collections and the DevOps for Mac sign-in.