CSS Gradient Generator

Build linear and radial CSS gradients with a live preview and copy the code. Runs entirely in your browser. Nothing is sent to any server.

Options

Type

Linear Radial

Angle (degrees)

Color 1

Position (%)

Color 2

Position (%)

CSS

background: #2563eb;
background: linear-gradient(90deg, #2563eb 0%, #db2777 100%);

What is a CSS gradient?

A CSS gradient is an image the browser draws from a list of colors, blending smoothly between them, so it needs no file to download and stays sharp at any size. A linear gradient blends along a straight line at the angle you choose, and a radial gradient spreads out from the center as a circle or an ellipse. Each color is a stop with a position along the way. This generator lets you pick the type, angle and up to six color stops, shows a live preview and writes the CSS, with a solid fallback color first.

Examples

The same gradient written for different targets:

CSS

background: #2563eb;
background: linear-gradient(90deg, #2563eb 0%, #db2777 100%);

Tailwind

<div class="bg-gradient-to-r from-blue-600 to-pink-600"></div>

JavaScript

element.style.background =
  "radial-gradient(circle, #2563eb 0%, #db2777 100%)";

Canvas

const g = ctx.createLinearGradient(0, 0, width, 0);
g.addColorStop(0, "#2563eb");
g.addColorStop(1, "#db2777");
ctx.fillStyle = g;

SVG

<linearGradient id="g">
  <stop offset="0%" stop-color="#2563eb" />
  <stop offset="100%" stop-color="#db2777" />
</linearGradient>

Use Cases

Hero sections and banners

Give a landing page header depth with a two or three color gradient instead of a heavy background image.

Buttons and badges

A subtle gradient between two close shades makes a call to action stand out without a different color.

Image overlays

Layer a gradient from transparent to dark over a photo so white text on top stays readable.

Placeholders and avatars

Generate colorful backgrounds for empty states, loading cards or default user avatars with no image assets.

Frequently Asked Questions

Why is there a plain background line before the gradient?

It's a fallback. A browser that doesn't understand the gradient ignores that declaration and keeps the solid color from the line above, so the element never ends up with no background at all.

How does the angle work?

0deg points up, 90deg to the right, 180deg down and 270deg to the left. The gradient line goes in that direction, so 90deg starts with the first color on the left and ends with the last on the right.

Can I use transparent colors?

Yes. Type a color with alpha, such as #00000080 or rgba(0, 0, 0, 0.5), in any stop. That's how image overlays and fade-out effects are made.

Why doesn't this offer conic gradients?

conic-gradient() isn't supported by every browser this site targets (Firefox added it in version 83), so the tool sticks to linear and radial gradients, which work everywhere.

Is my data sent to a server?

No. The preview and the CSS are generated in your browser with plain JavaScript. Nothing is transmitted or stored.