Build a gradient, copy the CSS.
Mix your brand colors into a linear, radial or conic gradient — copy the CSS or download a PNG.
How to make a gradient
- Choose linear, radial or conic.
- Add your colors — start from your brand colors with one click.
- Set the angle and reorder or add stops until it looks right.
- Copy the CSS, or download a PNG for slides and social.
Where gradients help
Gradients add depth to hero sections, buttons, cards and social graphics without needing an image file. Because the output is pure CSS, it stays crisp at any size and loads instantly.
Linear, radial and conic
Linear gradients run along an angle, radial gradients spread out from a center point, and conic gradients sweep around like a color wheel. The tool shows a live preview of each so you can pick the right one.
Frequently asked questions
What is a CSS gradient?
It’s a background made by blending colors smoothly together, written in CSS so it renders sharply at any size with no image file.
Can I use my brand colors?
Yes — one click seeds the gradient with your saved brand colors, then you can tweak from there.
Can I export an image?
Yes. Copy the CSS for the web, or download a PNG to use in slides, documents and social posts.
What's the difference between linear, radial and conic?
Linear runs along an angle, radial spreads from a center point, and conic sweeps around a center like a color wheel.
Is it free?
Yes, completely free with no signup.