MotionShine01 / Linear
Along a line
Colours blend along an angle: 90 degrees is left to right, 180 is top to bottom.
Free tool
CSS gradient generator, copy the code.
Pick linear, radial or conic, add as many colour stops as you like and slide them into place, set the angle, or start from a preset, and copy the CSS for your background. The preview updates as you go, and your last gradient is kept in this browser.
Colour stops
Presets
Made in your browser. Nothing is sent anywhere.
Three kinds
Linear, radial, conic.
02 / Radial
From the centre
Colours spread out in a circle or an ellipse.
03 / Conic
Around a point
Colours sweep around the centre like a colour wheel or a pie.
Questions
Good to know.
How do I make a CSS gradient?
Pick the type, set the colours and angle, then press Copy CSS and paste it into your stylesheet.
How many colours can a gradient have?
As many as you like. Press Add a colour.
Do all browsers support these?
Linear, radial and conic gradients work in every current browser.
Can I use it as a picture?
For a PNG or JPG background, use the gradient background maker.
Is it saved?
Your last gradient is kept in this browser.