Our new CSS Gradient Generator turns a few clicks into copy-paste-ready CSS.
- Unlimited color stops — start with two, add as many as you like, each with its own hex color and 0–100% position.
- Linear or radial — a full 0°–360° angle slider for linear gradients, or switch to radial for a glow that spreads from the center.
- Always-correct output — stops are sorted by position when the CSS is generated, regardless of the order you added them in, so the preview and the copied code never disagree.
- Four one-click presets — Sunset, Ocean, Mint, and Berry to start from instead of a blank canvas.
- Copy button — grabs the full
background: linear-gradient(...);(orradial-gradient(...)) declaration, ready to paste into any CSS file, with no vendor prefixes needed.
Two stops, #667eea at 0% and #764ba2 at 100%, at a 135° linear
angle, produce exactly this:
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);Everything renders live in your browser as you adjust it — nothing you build here is ever uploaded anywhere.