CSS Gradient Generator
Build a linear, radial, or conic CSS gradient with a live preview, start from a curated preset palette, then copy the ready-to-paste CSS code.
How to Create a CSS Gradient
- Choose Linear, Radial, or Conic from the "Gradient Type" dropdown.
- Optionally click a preset palette to instantly load a ready-made set of colors — you can still edit anything afterward.
- For linear and conic gradients, drag the angle slider to set the direction or starting angle.
- 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?
The linear-gradient() and radial-gradient() functions have been supported by all major browsers (Chrome, Firefox, Safari, Edge) for many years. conic-gradient() is newer but has also shipped in every major browser since 2020, so the generated CSS should work virtually anywhere without vendor prefixes.
Can I generate a radial or conic gradient, not just linear?
Yes — switch the "Gradient Type" dropdown to "Radial" or "Conic" and the preview and CSS output switch to a real radial-gradient() or conic-gradient() immediately. The angle slider becomes a starting angle for Conic gradients, and it's hidden entirely for Radial since radial gradients don't use a directional angle.
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.
What do the preset palettes do?
Clicking a preset like Sunset or Ocean instantly loads a curated set of colors and positions into the color stops below, so you get a good-looking starting point immediately. Presets don't lock anything in — you can still drag positions, change any color, add or remove stops, and switch gradient type afterward exactly as if you'd built it manually.