CSS Gradient Generator
Build linear or radial gradients with colour stops and copy the CSS instantly.
background: linear-gradient(90deg, #6366f1 0%, #a855f7 55%, #ec4899 100%);
Frequently Asked Questions
What gradient types are supported?
Linear gradients at any angle and radial gradients (circle or ellipse). You can use two to four colour stops, each with its own position percentage.
How do I use the generated CSS?
Copy the background declaration and paste it into your stylesheet or inline style. It works in all modern browsers without prefixes.
What is a colour stop position?
It is the point along the gradient line, from 0% to 100%, where that colour is fully reached. Colours blend smoothly between stops.
Can I make a hard two-tone split?
Yes. Set two stops of different colours to the same position (for example both at 50%) to get a sharp edge instead of a blend.
Related Tools
Color Code Converter
Convert between HEX, RGB, HSL, and other color formats.
Color Palette Generator
Pick a base colour and get harmonies, tints, shades and a full tonal scale.
Box Shadow Generator
Tweak shadow offset, blur, spread, colour and opacity with a live preview box.
Border Radius Generator
Set each corner radius with sliders — including fancy blob shapes — and copy the CSS.