The CSS Gradient Generator lets you design Linear, Radial, and Conic gradients in real time — adjust color stops, angle, and positions, then copy the ready-to-use CSS.
Features
- 3 gradient types: Linear (directional), Radial (center outward), and Conic (rotational — great for pie charts and color wheels).
- Angle control: Set 0–360° for Linear and Conic types with a slider or precise number input; the rotate button increments by 45° each click.
- Color stops: Each stop has an independent color picker and position slider (0–100%). Minimum 2 stops — add as many as you like.
- 10 curated presets including Sunset, Ocean, Aurora, and Conic Pride — click to load any preset as a starting point.
- Live large preview: The 192px preview panel and thin gradient bar both update instantly as you edit.
- One-click CSS copy: Get the complete background: gradient(...); CSS ready to paste into any stylesheet or style attribute.
How to use?
- Choose a gradient type, set the color stops and angle, or start from a preset.
- Check the preview and add or remove color stops as needed.
- Copy the generated CSS.
