🌈 CSS Gradient

Build a linear or radial gradient with any number of color stops, then copy the CSS straight into your project. Everything renders live, all computed locally in your browser.

Angle 90°

Color stops

CSS

How to Use This Tool

Choose Linear or Radial, add or remove color stops, and drag each stop's position slider to shape the blend. Click a preset to start from a ready-made combo. When it looks right, click "Copy CSS" and paste the background declaration into your stylesheet.

Everything runs locally in your browser; nothing you design here is uploaded or saved.