CSS Gradient Generator

Build CSS linear/radial gradients and copy the ready-made background rule.

Foreground / Color A

Background / Color B

Direction

Suggested Tools

Color Picker
Pick a color visually and copy HEX, RGB, or HSL values for CSS and design tools.
HEX ↔ RGB
Convert colors between HEX and RGB for CSS, canvas, and design handoff.
HEX ↔ HSL
Convert colors between HEX and HSL for tweaking lightness and saturation in CSS.

CSS Gradient Generator lets you mix stops and angles, then export `background-image: linear-gradient(...)`.

Tune colors and direction, run, and paste the CSS into your stylesheet.

Please enable JavaScript.