Gradient Generator
Build linear, radial and conic CSS gradients from scratch with draggable multi-stop control and curated presets. Copy ready-to-paste CSS instantly.
background: —;
Everything is computed live in your browser — no sign-up, completely free.
About Gradient Generator
The Gradient Generator builds custom CSS gradients from scratch. Choose a linear, radial or conic type, set the angle, and shape the blend with a multi-stop editor: drag handles to move stops, click the bar to add new ones, and recolor any stop with a picker — the live preview updates as you work.
Curated presets give you a strong starting point when you don’t want to begin from a blank slate, and one-click actions — random, reverse, rotate 45° — make exploration fast. The generated CSS is always visible and stays in sync with the preview, so what you copy is exactly what you saw.
Everything is computed live in your browser at no cost. Copy the full CSS rule or just the background value and paste it into a stylesheet, a button style or a hero section — a straightforward CSS gradient generator for backgrounds, overlays and UI accents.
How to use Gradient Generator
- Pick a gradient type: linear, radial or conic.
- Start from a preset or click "Random" for an instant starting point.
- Drag the stop handles to position colors, click the bar to add stops, and edit each stop’s color.
- Adjust the angle, or use "Reverse" and "Rotate 45°" to reorient the blend.
- Copy the CSS rule or the background value and paste it into your project.