Design Tools
CSS Gradient Generator
Build linear and radial CSS gradients visually. Add or remove colour stops, drag the angle slider for linear gradients, or pick a shape and position for radial ones. Copy the generated CSS in one click.
Your input is processed locally in your browser. It is not uploaded to Dueneo.
Loading CSS Gradient Generator…
How to use
- 1
Pick a gradient type
Switch between linear (a straight colour blend at an angle) and radial (a colour blend radiating from a point).
- 2
Set direction
For linear gradients, drag the angle slider. For radial gradients, pick a shape (circle or ellipse) and a centre position.
- 3
Manage colour stops
Add stops with the Add stop button, drag the position sliders to reorder them visually, change colours with the picker or HEX field, and remove a stop with the trash icon.
- 4
Copy the CSS
The generated `background:` rule appears on the right. Use Copy to put it on your clipboard and paste into your stylesheet.
Common use cases
- Build a hero-section background gradient for a landing page.
- Generate a button hover-state gradient that matches your brand palette.
- Prototype a radial vignette for a card or modal backdrop.
- Produce accessible multi-stop gradients for data visualisation legends.
Limitations
- Conic gradients are not supported — use linear or radial only.
- Stop positions are clamped to 0–100%. To extend a colour band beyond the box, edit the CSS by hand after copying.
- Only solid HEX colours are exposed in the UI. You can hand-edit the copied CSS to add alpha or HSL colours.
- A minimum of two colour stops is enforced; remove is disabled when only two remain.