CSS Gradient Generator

All three are CSS <image> values, so they go anywhere an image does: background-image, border-image, mask-image and list-style-image. They differ in the path the colors travel along.

Angles follow the CSS convention: 0deg points up and angles turn clockwise, so 90deg means "to right". Each function has a repeating- version that tiles the stop pattern, which is how stripes and rings are made without an image file.

A color stop is a color plus an optional position along the gradient line. Stops without positions are spread evenly, and the first and last default to 0% and 100%. Between two stops the browser blends; before the first and after the last it holds the color flat.

/* Even spread */
background: linear-gradient(90deg, #3b82f6, #a855f7, #ec4899);

/* Hard edge: two stops share 50%, so there is no blend */
background: linear-gradient(90deg, #0ea5e9 50%, #f97316 50%);

/* Stripes with a repeating gradient */
background: repeating-linear-gradient(45deg, #facc15 0 10px, #18181b 10px 20px);

Three details trip people up:

• Double positions like #18181b 10px 20px are shorthand for two stops of the same color, which is the cleanest way to write bands.
• Transparent stops blend with premultiplied alpha in modern browsers, so fading #ec4899 to transparent no longer passes through gray. Using the same color at 0% opacity (#ec489900) is still the most predictable choice, and it is what this generator writes.
• Color hints (a bare percentage between two stops, such as red, 30%, blue) move the midpoint of a blend without adding a color.

The interpolation color space decides how the browser mixes two stops. If every stop is a legacy color (hex, rgb(), hsl() or a name), the browser blends in sRGB; if any stop uses a modern syntax such as oklch() or lab(), the default becomes OKLab. sRGB mixes channel numbers rather than perceived color: blue to yellow passes through a dull gray in the middle (the "dead zone"), and red to green meets in a dark olive. CSS Color Module Level 4 lets you choose the space with an in clause.

Banding, the visible steps in a long and subtle gradient, is a different problem: an 8-bit display only has 256 levels per channel, so a dark navy fade across a wide hero runs out of in-between colors. Perceptual spaces spread those steps more evenly, adding a midpoint stop helps, and a faint noise texture layered on top hides what remains. Browsers that do not support the in clause drop the whole declaration, so turn on Fallbacks and the generator writes an sRGB version sampled from the same colors first.

background-image accepts a comma-separated list, and the first image paints on top. Layering several soft radial-gradient() blobs that fade to transparent over a solid base gives the "mesh gradient" look with no image file at all. The rule that makes it work: every layer except the bottom one needs transparent regions, or it hides everything beneath it.

Use the Layers list to add, reorder, hide and duplicate layers, and drag each radial layer's center on the preview. The Aurora and Pastel mesh presets are good starting points.

Yes. A gradient is generated by the browser, so it costs no network request, stays sharp at any size and on any pixel density, and usually weighs a few dozen bytes of CSS instead of kilobytes of PNG. Painting even many layers is fast.

The cost appears when you animate them. Changing a gradient's colors or angle every frame repaints the whole element. Prefer animating transform or opacity on a pseudo-element that holds the gradient, or animate background-position on an oversized gradient. To animate an angle smoothly, register it as a typed custom property:

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.spin {
  background: conic-gradient(from var(--angle), #3b82f6, #ec4899, #3b82f6);
  animation: spin 4s linear infinite;
}
@keyframes spin { to { --angle: 360deg; } }

Wrap decorative motion in @media (prefers-reduced-motion: no-preference), and avoid background-attachment: fixed on large gradients, which scrolls poorly on many phones. To pair a gradient with a matching shadow or glass panel, see the box-shadow generator and the glassmorphism generator.