CSS Gradient Generator
Design gradient backgrounds visually and copy the CSS.
Runs in your browser. Nothing is uploaded Free, no sign-up Works on mobile
background: #4f46e5; background: linear-gradient(135deg, #4f46e5 0%, #db2777 100%);
Angle: 135°
Colour stops0%
100%
How to use CSS Gradient Generator
- Pick a preset or choose your colours.
- Adjust stop positions, angle and type.
- Copy the CSS.
Frequently asked questions
Do CSS gradients work in all browsers?
Yes. Linear and radial gradients work everywhere; conic gradients work in all modern browsers.
Why is there a plain background line first?
It is a fallback colour for very old browsers and for when the gradient fails to load.
Related tools
All Developer Tools →- Box Shadow Generator Build soft, realistic shadows by layering several box-shadows, as modern UI kits do.
- Glassmorphism Generator Create the frosted-glass card effect used in modern app and website designs.
- Gradient Wallpaper Maker Make a unique, calm wallpaper in a few clicks, at your device’s resolution.
- Flexbox Playground Understand flexbox by changing properties and watching the items move.
- CSS Grid Generator Create grid layouts visually, including responsive card grids that need no media queries.
- JSONPath Tester Write and debug JSONPath queries used in API tests, Postman, Kubernetes and data pipelines.