CSS Gradient Generator
Build a linear or radial CSS gradient with a live preview, then copy the ready-to-paste CSS code.
How to Create a CSS Gradient
- Choose Linear or Radial from the "Gradient Type" dropdown.
- For linear gradients, drag the angle slider to set the direction.
- Pick a color and position for each stop, and add up to four stops with "+ Add Color Stop".
- Watch the preview box update instantly with your real generated gradient.
- Click "Copy CSS" to copy the ready-to-paste background CSS.
Frequently Asked Questions
Can I use more than two colors in my gradient?
Yes — you can add up to four color stops using the "+ Add Color Stop" button, each with its own color and position, and the preview and CSS output update instantly to include every stop you add.
Does this work in older browsers?
CSS gradients created here use the standard linear-gradient() and radial-gradient() syntax, which has been supported by all major browsers (Chrome, Firefox, Safari, Edge) for many years, so the generated CSS should work virtually anywhere without vendor prefixes.
Can I generate a radial gradient, not just linear?
Yes — switch the "Gradient Type" dropdown to "Radial" and the preview and CSS output switch to a radial-gradient() immediately; the angle control is hidden in this mode since radial gradients don't use a directional angle the same way linear gradients do.
Is my color data sent anywhere?
No — everything is generated locally with plain JavaScript in your browser tab; nothing is uploaded to a server.
What do the position percentages next to each color mean?
Each percentage sets where along the gradient that color reaches full strength — 0% is the start of the gradient and 100% is the end, so spacing stops unevenly lets you control exactly how much of the gradient each color dominates.