CSS Gradient Generator

Build linear and radial CSS gradients visually and copy the code.

0%
100%
background: linear-gradient(90deg, #00f0ff 0%, #ff00aa 100%);

Related Tools

🎨
Color Converter
Convert between HEX, RGB, HSL and OKLCH, check WCAG contrast ratios, and generate a tonal shade strip.
 📋
XML Formatter
Format, prettify, or minify XML with syntax validation and instant error feedback.
 🔑
Hash Generator
Compute SHA-1, SHA-256, SHA-384 and SHA-512 hashes of any text in your browser.

0 comments

How it works

Add color stops, set each stop's color and position, and the tool assembles a valid linear-gradient() or radial-gradient() string in real time. For linear gradients an angle slider controls direction from 0 to 360 degrees. A large live preview swatch updates as you edit so you see exactly what the CSS produces. The generated background property is shown in a code block ready to copy. All rendering uses the browser's own CSS engine — nothing is sent anywhere.


              background: linear-gradient(90deg, #f00 0%, #00f 100%);

Common use cases

  • Designing a hero-section background without hand-writing gradient syntax.
  • Experimenting with multi-stop color blends for buttons and cards.
  • Generating a radial gradient for a spotlight or vignette effect.

Frequently asked questions

How many color stops can I add?

As many as you like, with a minimum of two. Each stop has its own color picker and position percentage, and you can remove any stop down to the last two.

Does the angle apply to radial gradients?

No. Angle is a linear-gradient concept (direction of the color line). Radial gradients emanate from a center point, so the angle control is hidden in radial mode.

Is the generated CSS cross-browser?

Yes. Unprefixed linear-gradient and radial-gradient are supported by every modern browser. Vendor prefixes have not been needed for years.