CSS Gradient Generator
Create refined linear and radial gradients with editable color stops, hue, opacity, and ready-to-copy CSS.
Preview
Live
Presets
Global Controls
Single Stop Track (click empty area to add stop)
0%50%100%
Stops List
Select a stop to edit it in the panel on the right. Minimum 2 stops.
Stop 1
25.0% shareStop 2
50.0% shareStop 3
25.0% shareSelected Stop Editor
Gradient
RGBA
CSS Result
background: linear-gradient(120deg, rgba(45, 155, 219, 1.000) 0%, rgba(86, 203, 242, 1.000) 50%, rgba(188, 107, 217, 1.000) 100%);
