Gradient Generator

Design a linear or radial CSS gradient and copy the background. Runs entirely in your browser.

Angle135°
Colour 1#7c3aed
Colour 2#db2777
CSS
background: linear-gradient(135deg, #7c3aed, #db2777);

Processed on your device. This file is never uploaded.

  1. 1Choose linear or radial.
  2. 2Pick two colours and set the angle.
  3. 3Copy the background CSS.

Colour transitions, made visually

A CSS gradient blends one colour into another with no image file involved, so it stays crisp at any size and adds no download. This generator lets you pick the two colours and, for linear gradients, the angle, and shows the blend full-size as you adjust it.

Linear or radial, copy-ready

Switch between a linear sweep and a radial spread from the centre, and copy the resulting background declaration straight into your stylesheet. Everything is generated on your device, so there is nothing to upload and nothing to wait for.

Frequently asked questions

What next?

All css tools →
Glassmorphism Generator
Neumorphism Generator
Border Radius Generator
Box Shadow Generator
Clip Path Generator
CSS Grid Generator