Everyday Tools

Gradient Generator

Build a CSS linear or radial gradient visually.

CSS

Create a linear or radial CSS gradient with multiple color stops, adjust the angle and positions visually, and copy the finished CSS.

How to make a gradient

  1. Choose linear or radial.
  2. Pick your colors and add more stops if you need them.
  3. Set the angle for a linear gradient, and move each stop's position to control where colors blend.
  4. Copy the CSS and paste it into your stylesheet.

Reading the CSS

background: linear-gradient(90deg, #2563EB 0%, #9333EA 100%);

  • 90deg is the direction: 0deg runs bottom to top, 90deg left to right, 180deg top to bottom.
  • Each color stop pairs a color with a position. Stops close together make a sharp change; stops far apart make a soft blend.
  • radial-gradient spreads out from the center instead of along a line.

Design tips

  • Use neighboring colors — blue to purple, orange to pink — for smooth gradients. Opposite colors like red and green can turn muddy gray in the middle.
  • Keep text readable. Check that text has enough contrast across the whole gradient, not just one end.
  • Subtle works well. A small change in lightness, such as two shades of the same blue, often looks more polished than a bold rainbow.
  • Add a solid fallback color before the gradient line, for email clients and old browsers that don't support gradients.

Need matching colors? Start with the palette generator, then copy the hex codes into your gradient.

Frequently asked questions

Can I use more than two colors?

Yes — click "Add color" to add more stops to the gradient, or remove one down to a minimum of two.

What's the difference between linear and radial?

Linear gradients blend colors along a straight line at an angle you choose. Radial gradients blend outward from a center point in a circle or ellipse.

How do I use the CSS this generates?

Copy the generated code and paste it as the "background" (or "background-image") property in your stylesheet.

Can I use a gradient for text?

Yes, with a few extra CSS lines: set the gradient as the background, then add background-clip: text and color: transparent so the gradient shows through the letters.