CSS Gradient Generator
Build a linear or radial CSS gradient visually and copy the ready-to-use CSS, right in your browser.
🔒 Processed locally in your browser
Loading…
How to use
- Choose Linear or Radial for the gradient type. For linear gradients, drag the slider or type a value to set the angle in degrees.
- Each color stop has a color swatch and a position (0-100%). Click a swatch to pick a color, or type a position to move that stop along the gradient.
- Use "Add stop" to add up to 5 color stops, or Remove next to a stop to delete it (a minimum of 2 stops is required).
- The preview box above the CSS output updates live as you adjust any control — there's no button to press.
- Click Copy to copy the generated CSS declaration, ready to paste into your stylesheet.
Features
- Supports both linear (with adjustable angle) and radial gradients
- Up to 5 color stops, each with its own color and position
- Live preview box that updates instantly as you edit any control
- One-click copy of the ready-to-paste CSS declaration
- 100% client-side — your gradient never leaves your browser
Frequently asked questions
Does this tool send my gradient anywhere?
No. The gradient is built and previewed entirely with local JavaScript and CSS — nothing is ever uploaded or sent to a server.
How many color stops can I add?
Up to 5 stops. You need at least 2 stops for a gradient to make sense, so the Remove button is disabled once you're down to 2.
Does the angle control do anything for radial gradients?
No. Radial gradients in this tool always radiate outward from the center as a circle, so the angle setting only applies to linear gradients.
What if two stops have the same position?
That's allowed and can be used intentionally to create a hard color edge instead of a smooth blend — both stops are kept in the generated CSS.
Can I paste the output directly into my CSS file?
Yes. The output box shows a complete `background: ...;` declaration you can paste as-is into a stylesheet or inline style.