What Is a CSS Gradient?

A CSS gradient creates a smooth transition between two or more colours without a separate image file. Gradients are scalable (vector-based), load instantly, and are fully supported in all modern browsers.

CSS has three gradient types:

Type	Function	Shape
Linear	linear-gradient()	Straight line
Radial	radial-gradient()	Circle or ellipse from a centre point
Conic	conic-gradient()	Sweep around a centre point

Linear Gradients

background: linear-gradient(direction, color1, color2, ...);

Direction options:

Value	Meaning
to right	Left → right
to bottom	Top → bottom (default)
to bottom right	Diagonal
45deg	45° angle
135deg	135° angle

Examples:

/* Basic two-colour */
background: linear-gradient(to right, #6366f1, #8b5cf6);

/* With colour stops */
background: linear-gradient(90deg, #ff6b6b 0%, #ffd93d 50%, #6bcb77 100%);

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

Radial Gradients

background: radial-gradient(shape size at position, color1, color2);

/* Circle from centre */
background: radial-gradient(circle, #6366f1, #1e1b4b);

/* Ellipse at top-left */
background: radial-gradient(ellipse at 20% 30%, #ffd700, transparent);

Conic Gradients

background: conic-gradient(from angle at position, color1, color2);

/* Pie chart style */
background: conic-gradient(#ff6b6b 0% 30%, #ffd93d 30% 70%, #6bcb77 70% 100%);

/* Colour wheel */
background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);

Multiple Colour Stops

Colour stops control where each colour appears (as percentages or lengths):

/* Hard stop — no smooth transition */
background: linear-gradient(to right, red 50%, blue 50%);

/* Hint — midpoint shift */
background: linear-gradient(to right, red, 30%, blue);

Repeating Gradients

background: repeating-linear-gradient(
  45deg,
  #000 0px, #000 10px,
  #fff 10px, #fff 20px
);

Creates a striped pattern.

Layering Gradients

Multiple gradients can be stacked as comma-separated values:

background:
  linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
  linear-gradient(to right, #6366f1, #8b5cf6);

This overlays a dark tint over a purple gradient, useful for ensuring text readability over colourful backgrounds.

Performance

Gradients are GPU-accelerated and have no network cost. However, complex multi-stop gradients with background-size and background-repeat can trigger expensive repaints. Keep gradients simple when they animate.

Use the Gradient Generator to visually create and export any CSS gradient.