CSS Gradient Generator

How to use this tool

1. Choose a gradient type. Select Linear, Radial, or Conic from the type tabs.
2. Set the angle or position. For linear, drag the angle slider. For radial or conic, type a CSS position (e.g., "center", "top left").
3. Add and adjust color stops. Add stops, drag their markers on the preview, and adjust color, opacity, or position in the stop controls.
4. Copy the CSS. Click "Copy CSS" to copy the ready-to-use background declaration to your clipboard.

CSS gradient types

CSS provides three native gradient functions that create smooth color transitions without any images or external dependencies. All three work as values of the background, background-image, border-image, and other CSS image properties.

linear-gradient()

A linear gradient transitions colors along a straight axis. The first argument is a direction: an angle in degrees (90deg = left to right) or a keyword like to right, to bottom left, etc. Color stops follow the direction argument. Two stops create a simple two-color fade; more stops create complex multi-band gradients.

background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);

radial-gradient()

A radial gradient radiates outward from a center point. The shape is either circle (perfectly round) or ellipse (stretches to fit the element). The at keyword sets the origin position. Common values: center, top left, 50% 75%.

background: radial-gradient(circle at center, #3B82F6 0%, #1E3A8A 100%);

conic-gradient()

A conic gradient sweeps color stops around a central point, like the face of a clock or a color wheel. The from angle sets the starting point of the sweep; the at keyword sets the center of the sweep. Conic gradients are ideal for pie charts, color wheels, and angular patterns.

background: conic-gradient(from 0deg at center, #3B82F6 0%, #8B5CF6 50%, #3B82F6 100%);

Color stop syntax

A color stop is a color value followed by an optional percentage. If you omit the percentage, the browser distributes stops evenly. This editor gives every stop an explicit position and uses 3- or 6-digit hex colors. Put two stops at the same percentage to create a hard edge; the generated CSS keeps both stops, so no manual edit is needed:

/* Soft blend */
linear-gradient(to right, red 0%, blue 100%)

/* Hard edge at 50% */
linear-gradient(to right, #ff0000 50%, #0000ff 50%)

Hard-stop patterns

Turn on Repeat gradient to tile the interval between the first and last stops. Move two neighboring stops to the same percentage for a sharp transition, which is useful for stripes. This editor exports one gradient layer. Checkerboards and other multi-layer patterns need extra background-size, background-position, or gradient layers added after you copy the CSS:

/* Horizontal stripes */
background: repeating-linear-gradient(
  180deg,
  #000 0%,
  #fff 50%,
  #000 50%,
  #fff 100%
);

/* A multi-layer checkerboard needs manual edits after copying */
background: 
  linear-gradient(45deg, #ccc 25%, transparent 25%),
  linear-gradient(-45deg, #ccc 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #ccc 75%),
  linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;

Gradient with transparency

Use the Opacity slider on a stop to let the element’s background show through. The generator writes translucent hex colors as rgba() stops. For a clean fade, keep the same RGB color on both stops and lower the opacity of one stop; changing the color at the same time can make the fade look muddy:

/* Fade the same black color from 80% to transparent */
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));

/* Vignette effect */
background: radial-gradient(circle, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 100%);

This is commonly used for image overlays, vignettes, and fade-to-background effects in hero sections.

CSS gradient libraries

Need inspiration? These curated gradient libraries provide copy-paste CSS for hundreds of beautiful combinations:

• Coolhue - coolhue.io - 60+ gradients with copy button
• UI Gradients - uigradients.com - Beautiful multi-color gradients
• Gradienta - gradienta.io - Open-source gradient collection with search and SVG export