Tools Guides
design Free No signup

CSS Gradient Generator

Visually build CSS linear and radial gradients and copy the ready-to-use CSS property.

Loading tool…

About this tool

Create beautiful CSS gradients without writing code. Add color stops, drag them to set positions, pick gradient type (linear or radial), and adjust the angle. The live preview updates instantly, and you can copy the full background CSS property with one click.

How to use

  1. 1 Select 'Linear' or 'Radial' gradient type.
  2. 2 Add color stops and pick colors and positions for each.
  3. 3 For linear gradients, adjust the angle with the slider.
  4. 4 Copy the CSS output and paste it into your stylesheet.

Frequently Asked Questions

{# Alpine.js — self-hosted. (The previous jsdelivr CDN tag had a stale SRI integrity hash, so the browser refused to run it and window.Alpine was never defined — silently breaking every FAQ accordion and Alpine tool.) #}