Every Gradient, Ready to Paste
Choose as many colors as you need, slide each one to the position you want, and switch between a linear gradient at any angle or a radial one. The preview updates as you go and the CSS underneath is exactly what is being drawn, so what you copy is what you saw. Everything runs in your browser — nothing is sent to a server.
🧩 Great For
- Designing a hero section, card, or button background for a website
- Trying out color combinations before committing them to a design system
- Producing a background for a slide, thumbnail, or social image
- Grabbing valid gradient syntax without looking up the CSS spec
📋 How to Use
- Pick a preset to start from, or edit the two default colors directly
- Add stops for more colors and drag each slider to set its position
- Switch to radial, or keep linear and set the angle you want
- Press "Copy CSS" and paste the rule straight into your stylesheet
Frequently Asked Questions
What is the difference between a linear and a radial gradient?
A linear gradient blends colors along a straight line, and the angle decides its direction — 0deg runs bottom to top, 90deg runs left to right. A radial gradient blends outward in a circle from the center, so the first color sits in the middle and the last one at the edge.
Does the copied CSS work in every browser?
Yes. Unprefixed linear-gradient() and radial-gradient() have been supported by every current browser for years, so the rule can be pasted as it is — no vendor prefixes needed.
How many colors can I use?
Between two and eight stops. CSS itself has no such limit, but past a handful of colors a gradient usually reads as muddy rather than smooth, so the tool keeps it to a workable range.
Are my colors saved or uploaded anywhere?
No. The gradient is built and previewed entirely in your browser and nothing is sent to a server or stored — reload the page and you are back to the default gradient.