CSS Gradient Generator

Gradient type:

Angle: 90 deg

Color 1 Position (%)

Color 2 Position (%)

Color 3 Position (%)

Live preview:

CSS code:

About CSS Gradient Generator

CSS gradients paint smooth color transitions directly in the browser: hero backgrounds that fade blue to purple, glowing buttons, soft card highlights, with zero image files to download. They scale perfectly to any screen and cost almost nothing in performance. Our free CSS Gradient Generator lets you design them visually instead of wrestling with syntax.

Pick your colors, set the angle and gradient type (linear, radial, or conic), preview the result live, then copy the finished CSS straight into your stylesheet.

Why gradients beat images here

A few dozen bytes of CSS replace a 200 KB background image and its HTTP request.
No compression artifacts and no blurry upscaling on retina screens.
Easy to tweak: change a color, and every page updates instantly.

Master the syntax behind the tool with our CSS gradient guide.