Submit a tool

CSS Gradient Generator

Build linear and radial gradients with live preview, add as many color stops as you need, and copy production-ready CSS in a click.

Color stops

Design gradients without writing CSS by hand

Gradients add depth to buttons, hero sections and cards, but getting the syntax and color stops right by hand is fiddly. This generator gives you a visual canvas: tweak the angle, drag stops into place, and watch the preview respond instantly. When it looks right, copy the exact CSS.

How to use it

  1. Choose a type. Linear blends along an angle; radial blends outward from the center.
  2. Set direction. Drag the angle slider, or pick a circle or ellipse shape for radial.
  3. Add your colors. Each stop has a color picker and a position slider — add up to six.
  4. Copy the CSS. Paste it straight into the background of any element.

Tips for better gradients

  • Keep it subtle. Two close hues read as a smooth surface; wildly different colors can look muddy in the middle.
  • Mind the midpoint. Move a stop off 50% to bias the blend toward one color.
  • Reuse as variables. Drop the value into a CSS custom property to reuse it across your design.

Frequently asked questions

How do I use the gradient generator?

Pick a gradient type (linear or radial), set the angle or shape, then choose your colors. Drag each stop's slider to move it along the gradient. The preview updates instantly and the CSS appears below — hit Copy CSS to grab it.

How many colors can I add?

Start with two and add up to six color stops. Each stop has its own color and position, so you can build everything from a simple two-tone fade to a rich multi-color blend.

What's the difference between linear and radial?

A linear gradient blends colors along a straight line at the angle you set. A radial gradient blends outward from the center as a circle or ellipse. Switch between them to compare without losing your colors.

Can I use the output anywhere?

Yes. The generated rule is standard CSS — paste it into the `background` property of any element. It works in every modern browser with no prefixes needed.

Is my work private?

Completely. Like every ToolNest tool, the gradient is generated entirely in your browser. Nothing is uploaded, logged, or stored.