Gradient Generator

Build CSS gradients with live preview. Add color stops, tweak angles/positions, and copy clean output.

How to Use

  1. Pick a gradient type (Linear, Radial, or Conic).
  2. Add 2–5 color stops and set optional positions.
  3. Adjust angle / center / shape as needed.
  4. Copy the generated CSS or create a Share Link.
Live Preview
Preview updates instantly. URLs only change when you press Share.
Type
—
Stops
—
Angle
—
Center
—
CSS
—
Tip: Use “Copy CSS” in the Tool Menu for a full snippet (with optional fallback).
Inputs & Settings
Control type, direction, stops, and geometry. Use positions for precision.
Linear uses angle; Radial/Conic use a center point.
Common: 0, 45, 90, 135, 180
Applies to radial gradients only.
Applies to radial gradients only.
0–100 (left → right)
0–100 (top → bottom)
Color Stops

Add 2–5 stops. Positions are optional (auto-distributed if blank).

Accessibility note: gradients can reduce text contrast. Use the Contrast Checker on any text overlay.
Details (generated syntax)
—
Details show the exact function and stop list used to build the CSS.

CSS Gradient Reference

  • Linear: linear-gradient(ANGLE, STOP1, STOP2, ...)
  • Radial: radial-gradient(SHAPE EXTENT at X% Y%, STOPS...)
  • Conic: conic-gradient(from ANGLE at X% Y%, STOPS...)
Tip: If you omit positions, browsers distribute stops automatically.

FAQ

Why does my gradient look “banded”?

Banding can happen on low-quality panels or with subtle color transitions. Try adding an intermediate stop, increasing contrast slightly, or applying a tiny noise overlay in your design (outside this tool).

Should I include a fallback color?

Yes for safety. A solid background-color fallback helps older renderers and improves perceived loading. This tool can include it in the copied snippet.

Why doesn’t the URL update while I adjust things?

Utilities Bunker tools avoid auto-updating URLs during interaction. Use the Share button to generate a link intentionally.

Can I use this for text gradients?

Yes—copy the gradient and use it with background-clip:text techniques in your own CSS. (This tool outputs the gradient; text styling is implementation-specific.)

Tool Info

Last updated:

Updates may include additional stop controls, export formats, and edge-case handling.