CSS Gradient Generator — Linear & Radial Gradients
Free CSS gradient generator. Design linear and radial gradients with multiple colour stops, set the angle and copy ready-to-use CSS.
Runs in your browser — your data is never uploaded.
Design beautiful gradients visually. Choose linear or radial, set the angle, pick two or three colours and watch the live preview. Copy the CSS background declaration and paste it into your stylesheet.
How to use the CSS Gradient Generator
- Choose the gradient type and angle.
- Pick your colours.
- Copy the CSS.
CSS Gradient Generator — frequently asked questions
What is a CSS gradient?
A smooth transition between two or more colours generated by CSS instead of an image.
Can I add more colours?
Yes, enable the third colour stop.
Are gradients supported everywhere?
Yes. All modern browsers support CSS gradients.
Related free tools
Color Converter
Free colour converter. Convert between HEX, RGB, HSL and CMYK with a colour picker and live…
CSS Box Shadow Generator
Free CSS box-shadow generator. Adjust offset, blur, spread, colour and opacity with a live p…
Lorem Ipsum Generator
Free Lorem Ipsum generator. Create placeholder text by paragraphs, sentences or words for mo…
Have an idea? Let’s build it.
Tell us what you need — we’ll reply with a clear, written quote. No pressure, no jargon.