CSS Gradient Generator

Pick colors, set stop positions, choose linear or radial, and adjust the angle. See the gradient update live and copy the CSS when you're done. No signup, no server - runs entirely in your browser.

Pick colors, set positions, choose a type and angle. The CSS updates live.

Type

Angle: 135°

Color stops

100%

CSS

background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

How it works

Add color stops, drag their positions, and pick between linear and radial gradients. For linear gradients you can set the angle from 0 to 360 degrees. The preview updates in real time so you can see exactly what you'll get. When the gradient looks right, copy the CSS rule and drop it into your stylesheet.

When you'd use this

Adding a gradient background to a hero section, button, or card. Creating a smooth color transition for a loading bar or progress indicator. Building branded backgrounds without image files. Gradients are pure CSS - they scale to any size and don't add to page weight like images do.

Linear vs radial

Linear gradients transition along a straight line at the angle you set. Radial gradients radiate outward from a center point. Most UI backgrounds use linear gradients. Radial works well for spotlight effects, circular badges, or vignettes. Both accept multiple color stops so you can create complex transitions with three, four, or more colors.