CSS gradient generator
Build linear, radial and conic gradients visually: add colour stops, set their positions and opacity, change the angle or centre, and watch the live preview. Copy clean CSS with a solid fallback colour, ready to paste into your stylesheet, website builder or design.
How to use the CSS Gradient Generator
- 1Pick the gradient type: linear, radial or conic.
- 2Edit the colour stops: change a colour, move its position, set its opacity, or add and remove stops.
- 3Set the angle for linear and conic gradients, or the shape and centre for radial ones.
- 4Copy the CSS and paste it into your stylesheet.
Frequently asked questions
How do I make a gradient background in CSS?
Set background-image to a gradient function, such as linear-gradient(90deg, #6366f1 0%, #ec4899 100%). This tool writes it for you, plus a solid background-color first as a fallback.
Do CSS gradients work in every browser?
Linear and radial gradients work in every current browser without prefixes, and conic gradients in all major browsers released since 2021.
Are CSS gradients better than gradient images?
Usually, yes. A CSS gradient is a few bytes, scales to any size without blurring and can be changed in code; an image adds a download and can show banding.
What is a repeating gradient?
A gradient that repeats its colour stops across the element, which makes stripes and rings. Turn on Repeating and keep the last stop below 100% to see it.
Related free tools
All tools- Radial gradient generatorCSS radial gradient generator
- CSS Box Shadow GeneratorLayered CSS box shadows with a live preview, ready to copy.
- Colour Contrast CheckerWCAG 2.2 AA and AAA contrast checks with a passing colour suggestion.
- Colour Picker From ImageClick any pixel to get its HEX, RGB and HSL, plus the top colours.
- HTML, CSS & JS MinifierMinify HTML, CSS and JavaScript safely.
Then schedule it with Join Postly
Plan, publish and track your posts on every network from one calendar. Free plan, no credit card.