CSS Gradient Generator

Create linear and radial CSS gradients with a live preview. Copy the CSS code instantly.

135°

Color Stops

#3B82F60%

#8B5CF6100%

CSS Output

background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);

How to Use the Gradient Generator

Select Linear or Radial gradient type. For linear gradients, drag the angle slider or type a degree value. Add or remove color stops using the controls — each stop has a color and a position from 0% to 100%.

The live preview updates as you adjust. When satisfied, click Copy CSS to copy the background declaration directly to your clipboard.