CSS Gradient Generator

Build a linear or radial CSS gradient with a live preview, entirely in your browser.

How it works

Each color stop has a color and a position along the gradient, from 0% to 100%. A linear gradient also has an angle, following CSS’s convention where 0deg points up and the angle increases clockwise. Changing any value updates both the preview and the generated CSS immediately.

Linear vs. radial

A linear gradient transitions along a straight line in one direction. A radial gradient instead radiates outward from a center point, which is better suited to spotlight or vignette effects than directional ones.

Common uses

Building a background for a hero section or button, or generating a gradient overlay to place on top of an image for text legibility.

Frequently asked questions

Can I use this gradient directly in CSS?

Yes. Copy the generated value into any property that accepts an image, most commonly background or background-image.

What does the angle mean for a linear gradient?

It follows the CSS convention: 0deg points to the top, and the angle increases clockwise, so 90deg points to the right and 180deg points to the bottom.