Gradient Generator

Design linear and radial gradients and copy the CSS code.

What Does the Gradient Generator Do?

This tool designs CSS gradients visually and hands you production-ready code. Choose linear, radial or conic gradients, set the angle with a slider, pick two or three colors, and watch the live preview update with every tweak. Swap colors with one click, roll random combinations for inspiration, and copy CSS that includes a solid-color fallback line for very old browsers.

How to Create a Gradient

  1. Pick the gradient type — linear (straight fade), radial (from the center out) or conic (rotating around the center).
  2. Adjust the angle slider (linear/conic) and choose your colors; enable the third stop for richer blends.
  3. Fine-tune until the preview looks right — try ⇄ Swap and 🎲 Random for quick variations.
  4. Copy the CSS and paste it onto any element's background.

Gradient Design Tips

  • Stay near neighbors — hues close on the color wheel (blue→purple, orange→pink) blend smoothly; opposites can produce muddy gray midpoints.
  • 135° is the classic — the top-left to bottom-right diagonal feels natural for hero sections and cards.
  • Use three stops for depth — a mid-tone between two ends prevents flat-looking fades on large surfaces.
  • Conic gradients make pie-chart effects, color wheels and shimmering borders — no images needed.
  • Text on gradients — check contrast against the lightest region, not the average.

Frequently Asked Questions

Which browsers support these gradients?

Linear and radial gradients work in every browser released in the last decade. Conic gradients are supported by all modern browsers (Chrome 69+, Firefox 83+, Safari 12.1+). The generated CSS includes a solid-color first line as a safety net.

What do the percentages in the CSS mean?

They are color-stop positions along the gradient line: 0% is the start, 100% the end. With three colors the middle stop sits at 50%, giving an even blend — edit the numbers to push colors toward one end.

Can I animate a CSS gradient?

Gradients themselves don't transition smoothly, but two reliable tricks exist: animate background-position on an oversized gradient, or crossfade two layered elements. Modern browsers also support animating gradient colors via @property registered custom properties.

Linear, radial or conic — when to use which?

Linear for headers, buttons and section backgrounds; radial for spotlight and vignette effects; conic for pie charts, progress rings and colorful border effects.