CSS Gradient Generator
Generators & QR · Done in 3 steps
- 1Pick a gradient type
- 2
- 3
About
Design linear, radial and conic CSS gradients with draggable colour stops, angle control and presets. Copy clean, ready-to-paste CSS.
How to use it
- 1Choose linear, radial or conic.
- 2Drag the colour stops along the bar, click the bar to add a stop, and pick each stop’s colour.
- 3Set the angle or centre point, or start from a preset.
- 4Copy the CSS, which includes a solid fallback colour.
- You give
- Gradient type, colour stops, angle/centre
- You get
- CSS background declaration
- Good to know
- Colour stops use hex colours. Advanced features like colour hints, multiple stacked gradients and interpolation colour spaces (in oklch) aren’t exposed in the editor.
- Privacy
- Processed on your device. Nothing is uploaded, stored or logged.
- Last tested
- 2026-10-28
FAQ
Do I still need -webkit- prefixes?
No. Unprefixed linear-, radial- and conic-gradient work in all current browsers. The fallback line covers very old ones.
How do I make a hard colour stripe?
Put two stops at the same position with different colours. The colour switches instantly instead of blending.
Go further with AI
Content calendar workflow
Plan a month of content from goals and pillars, with formats per channel, a realistic cadence and a production schedule you can actually keep.
ChatGPT · Claude · Gemini
Customer interview synthesis
Turn interview transcripts into evidence-backed themes, jobs-to-be-done statements and opportunities, with quotes and counts rather than vibes.
Claude · ChatGPT · Gemini
Competitor comparison worksheet
Compare competitors on criteria buyers actually use, with evidence for every cell and an honest view of where you win and lose.
ChatGPT · Claude · Gemini
Landing page critique
Get a prioritised, conversion-focused critique of a landing page's copy and structure, judged from the point of view of the visitor you're paying for.
ChatGPT · Claude · Gemini