CSS Gradient Generator

Create stunning linear or radial CSS gradients with live preview. Copy the CSS code instantly — free, no login required.

Gradient Type

Angle135°

Color 1

Color 2

Color 3 (optional)

Include 3rd color

CSS Output

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

How to Use the CSS Gradient Generator

Select linear or radial gradient type, choose your colors, set the angle, then copy the generated CSS into your stylesheet. Supports 2 and 3-stop gradients for backgrounds, buttons, text, and more. Works with all modern browsers.