Color Tools

CSS Gradient Generator

Create beautiful CSS gradients with multiple color stops, angle control, and live preview.

90°

How to use this tool

  1. Pick a type with the Linear / Radial tabs at the top of the controls.
  2. For linear gradients, drag the Direction slider or click an arrow on the compass to set the angle in degrees.
  3. For radial gradients, choose Circle or Ellipse from the Radial Shape dropdown.
  4. Set each stop's color with its picker and type a position from 0 to 100 percent.
  5. Add more stops with + Add Color Stop, or remove one with its ✕ button (at least two stops remain).
  6. Click Copy CSS to copy the generated background and background-image rules to your clipboard.

Why this tool is helpful

Skip the syntax, not the control

Multi-stop linear-gradient() and radial-gradient() values are easy to mistype. This writes correct CSS for you while you still control every stop and angle.

See changes instantly

The live preview updates on every slider, color, and position change, so you see the exact gradient the CSS will render before you paste it anywhere.

Copy ready-to-paste rules

The output includes both background and background-image declarations, so it drops straight into any stylesheet or inline style.

Start from a preset

Ten presets like Sunset, Ocean, and Midnight give you a working gradient to tweak instead of starting from a blank slate.

Use standards-compliant CSS

The generated values are plain CSS gradients that work in every modern browser — no frameworks, images, or vendor prefixes required.

Stay private

Everything runs in your browser. Nothing is uploaded, logged, or sent to a server, so your colors and styles never leave your machine.

FAQ

What exactly does this tool generate?

It builds a CSS gradient value — linear-gradient() or radial-gradient() — from your color stops and settings, then outputs it as background and background-image declarations you can copy.

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 a center point, as a circle or ellipse.

How does the angle work?

The angle follows standard CSS: 0deg points up, 90deg points right, and so on clockwise. The compass buttons jump straight to the common 45° steps.

What do the color-stop positions mean?

Each position is a percentage along the gradient where that color sits. The first stop is typically 0% and the last 100%; stops are sorted by position when the CSS is built.

Can I use the output in any project?

Yes. It's standard CSS, so paste it into a stylesheet, a style attribute, or any CSS-in-JS template. It needs no dependencies or browser prefixes.

Does any of my data leave my browser?

No. All generation happens locally in JavaScript. Your colors, presets, and CSS output are not sent to, stored on, or logged by any server.