CSS Gradient Generator: Linear, Radial and Conic
Create beautiful linear, radial and conic gradients with multiple colour stops, or start from a random preset, and copy the CSS.
Open the free CSS Gradient Generator →What is the CSS Gradient Generator?
Linear, radial and conic CSS gradients with multiple colour stops, plus random presets. It's completely free, needs no sign-up and works on any phone or computer.
Why it's helpful
- Three gradient types
- Multiple colour stops
- Random presets for inspiration
Who it's for
Web designers and developers.
How to use it
- Pick type, angle and colour stops. Add as many stops as you like.
- Copy the CSS. A solid fallback colour is included.
💻 Open source: this tool is free and open source (MIT License). View the code on GitHub, download it and run it offline.
The bigger picture: Design
Good design builds trust in seconds. Colour, typography, spacing and accessibility tools help developers and small businesses create websites that look professional without hiring a full design team.
What's changing: Accessibility is moving from nice-to-have to expected, and modern CSS now does with a few lines what used to need images and JavaScript.
Frequently asked questions
Do gradients work in all browsers?
Yes. All modern browsers support linear, radial and conic gradients.
