CSS Gradient Generator

Build linear and radial gradients visually. Copy the CSS with one click.

135°

CSS Output

background: linear-gradient(135deg, #2563eb, #7c3aed);

Browser prefixes (if needed)

background: -webkit-linear-gradient(135deg, #2563eb, #7c3aed);
background: -moz-linear-gradient(135deg, #2563eb, #7c3aed);
background: linear-gradient(135deg, #2563eb, #7c3aed);

Presets

About CSS Gradients

CSS gradients create smooth transitions between colours without images. Linear gradients go in a straight line at any angle; radial gradients radiate outward from a central point. Supported in all modern browsers — no vendor prefix required for standard usage.