Free tool No sign-up
CSS Gradient Generator
Build linear, radial, and conic CSS gradients visually — adjust stops, angles, and colours with a live preview, then copy the output.
gradientbackgroundcssgeneratorvisual-tool
How to use
01
Choose a gradient type
Pick Linear for directional fades, Radial for circular bursts, or Conic for pie-chart style sweeps.
02
Set your colour stops
Click any colour swatch to open the picker. Drag the slider to reposition a stop along the gradient.
03
Add more stops
Click "+ Add colour stop" to insert additional colours for multi-tone gradients.
04
Adjust the angle
Use the Angle slider to rotate linear and conic gradients from 0° to 360°.
05
Set radial options
For radial gradients, choose Ellipse or Circle shape and set the centre position.
06
Copy the CSS
Hit "Copy CSS" to grab the full background declaration and paste it into your stylesheet.
Gradient types
linear-gradient()
Transitions colours along a straight line at any angle.
background: linear-gradient(135deg, #7c3aed, #06b6d4);
radial-gradient()
Radiates colours outward from a centre point.
background: radial-gradient(circle at center, #7c3aed, #0a0a0a);
conic-gradient()
Sweeps colours around a centre like a colour wheel.
background: conic-gradient(from 0deg, #7c3aed, #06b6d4, #7c3aed);
CSS syntax examples
Linear
background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
Radial
background: radial-gradient(ellipse at center, #7c3aed 0%, #0a0a0a 70%);
Conic
background: conic-gradient(from 90deg, #7c3aed, #ff6c8a, #06b6d4, #7c3aed);
Multi-stop
background: linear-gradient( 135deg, #7c3aed 0%, #a855f7 40%, #06b6d4 100% );
| Parameter | Applies to | Description |
|---|---|---|
angle | linear, conic | Direction of the gradient — e.g. 135deg, to right, to bottom left. |
shape | radial | ellipse (default) or circle. |
position | radial | Centre point — e.g. at center, at top right. |
color stop | all | A colour followed by an optional position — e.g. #7c3aed 0%, #06b6d4 100%. |
hint | all | A bare percentage between stops that shifts the midpoint of the transition. |
Browser support
linear-gradient() and radial-gradient() are supported in all modern browsers.
conic-gradient() requires slightly newer versions — check the table below.
| Browser | linear-gradient | radial-gradient | conic-gradient |
|---|---|---|---|
| Chrome | v26+ | v26+ | v69+ |
| Firefox | v16+ | v16+ | v83+ |
| Safari | v7+ | v7+ | v12.1+ |
| Edge | v12+ | v12+ | v79+ |