CSS Gradient Generator

Design a gradient visually and copy the CSS in one click. Choose your colors, angle and type, see it live, and paste the background rule straight into your stylesheet. No signup; runs in your browser.

Type Angle: 135° Color 1 Color 2 Add a third color

CSS

Tips

Subtle beats loud for backgrounds — keep the two colors close in hue/brightness for a tasteful look.
Linear for sections and buttons; radial for spotlight/vignette effects.
Check text on top of the gradient with the contrast checker.

More design tools: color palette generator, favicon generator, and the full tools list.