CSS Gradient Generator

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. You can also specify two percentages per stop to create a hard edge:

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

/* Hard edge at 50% */
linear-gradient(to right, red 0% 50%, blue 50% 100%)

Hard-stop patterns

You can create repeating stripes, checkerboards, and other geometric patterns by combining hard-stop gradients with background-size and background-repeat:

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

/* Checkerboard */
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 rgba(), hsla(), or the transparent keyword to fade from a color to fully transparent:

/* Fade to transparent */
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent);

/* Vignette effect */
background: radial-gradient(circle, transparent 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