CSS Gradient Generator

Build linear or radial CSS gradients visually with unlimited color stops and copy the exact CSS.

FreeBrowser-basedInstant
Gradient type
deg
Color stops

Your files are processed locally in your browser and are not uploaded to our servers. All gradient generation happens instantly in your browser using plain JavaScript — nothing is sent to a server.

How to use CSS Gradient Generator

Add two or more color stops, each with its own color and position, and choose whether the gradient is linear (with an adjustable angle) or radial. The large preview updates instantly as you tweak any control, showing exactly what the final gradient looks like. When it looks right, copy the generated `background` CSS straight into your stylesheet. Everything runs entirely in your browser — nothing is uploaded or stored.

Key features

  • Linear and radial gradient modes
  • Adjustable angle for linear gradients (0-360°)
  • Unlimited color stops with per-stop color and position controls
  • Large live preview that updates instantly
  • One-click copy of the exact generated CSS
  • Randomize button for quick color inspiration

Practical use cases

  • Creating a gradient background for a website hero section
  • Building a gradient overlay for a card or button hover state
  • Generating a gradient for a mobile app splash screen
  • Creating a smooth color transition for a data-visualization or chart background

Supported formats

Accepted: css-gradient

Limitations

  • Radial mode is limited to a simple centered circle shape, with no custom position or ellipse shape controls
  • Generates a single gradient layer, with no support for combining multiple stacked gradients in one background

Frequently asked questions

What's the difference between linear and radial gradients?
A linear gradient transitions colors in a straight line at a chosen angle (e.g. left to right, or top to bottom), while a radial gradient transitions colors outward from a center point in a circle. This tool supports both, with an adjustable angle for linear and a simple centered circle for radial.
Can I use more than 2 colors?
Yes. Click "Add color stop" as many times as you like to add additional colors, each with its own position from 0% to 100%. Stops are sorted by position automatically when the CSS is generated, no matter what order you added them in.
How do I copy the generated CSS into my stylesheet?
Click "Copy CSS" to copy the exact `background: linear-gradient(...)` or `background: radial-gradient(...)` declaration to your clipboard, then paste it directly into your CSS file or style block.
Does this work with CSS custom properties/variables?
No — this tool outputs a plain, static `background` value with literal color codes and positions, not CSS variables. If you want a variable-based gradient, you can wrap the generated colors in your own `var(--my-color)` declarations afterward.

Part of CSS Tools