Create a CSS gradient.
Create a linear or radial CSS gradient. Adjust colours, opacity and stops, then copy the CSS or download a PNG. Free, with no signup.
Checkerboard shows transparency. PNG export is 1200 × 800 pixels.
Shape your gradient
Or start with colours from the palette generator.
View CSS
Colour stops
Keep your gradient
Saved on this device
No account needed. Clearing browser site data removes saved results, so download anything you want to keep.
Make a background from your palette.
Pick two or more colours, then set their positions. A stop at 0% starts the gradient; 100% ends it. Use the angle to change a linear gradient’s direction, or try Radial for a centred wash of colour.
Try a sharper transition
Set two different stops to 50% for a crisp colour split. Move them to 40% and 60% for a short, softer blend. The preview and downloaded CSS update as you edit.
For text over a gradient, check contrast at every background colour behind the text, not just at the ends.
Useful answers
What is the difference between linear and radial gradients?
A linear gradient follows a straight direction that you control with an angle. A radial gradient expands from the centre in a circle to the farthest corner of its box.
How do colour stops work?
Each stop places a colour at a percentage along the gradient. Stops are rendered in position order. Two stops at the same position create a hard transition. Opacity lets the background beneath your gradient show through.
Can I turn an image palette into a gradient?
Yes. Use Make a gradient from the image picker or palette generator. You can also choose a palette saved in this browser. Imported colours start at evenly spaced positions.
Can I download and save my gradient?
Copy or download CSS for a website, or download a 1200 by 800 pixel PNG with transparency preserved. Save a named gradient to reopen it in this browser. Saved gradients do not sync to other devices.