CSS Gradients: A Complete Guide for Developers and Designers

CSS gradients let you create smooth transitions between colours without image files — they're resolution-independent, load instantly, and are supported in every modern browser. If you've been avoiding gradients because the syntax looks intimidating, this guide breaks it down step by step.

The Three Types of CSS Gradient

1. Linear Gradient

The most common type. Colour transitions along a straight line.

/* Basic top-to-bottom */

background: linear-gradient(#6c63ff, #f43f8a);



/* With direction */

background: linear-gradient(to right, #6c63ff, #f43f8a);



/* With angle */

background: linear-gradient(135deg, #6c63ff, #f43f8a);

The angle controls direction: 0deg is bottom-to-top, 90deg is left-to-right, 180deg is top-to-bottom. The most popular choice in modern UI design is 135deg — a diagonal that feels dynamic without being aggressive.

2. Radial Gradient

Transitions outward from a centre point, creating circular or elliptical patterns.

/* Default — ellipse from centre */

background: radial-gradient(#6c63ff, #f43f8a);



/* Circle, positioned top-left */

background: radial-gradient(circle at 20% 30%, #6c63ff, transparent);

Radial gradients are useful for spotlight effects, glow accents, and the mesh gradient technique (stacking multiple radials at different positions).

3. Conic Gradient

Transitions around a centre point, like a pie chart or colour wheel.

background: conic-gradient(red, orange, yellow, green, blue, violet, red);

Conic gradients are perfect for progress rings, pie charts, and colour wheels.

Adding Multiple Colour Stops

Gradients aren't limited to two colours. Add as many stops as you need:

background: linear-gradient(135deg, #6c63ff 0%, #f43f8a 50%, #ff7700 100%);

Stop positions can be percentages or lengths (px, em). If you omit positions, the browser distributes stops evenly.

Creating a Gradient Overlay on an Image

One of the most practical uses of gradients is overlaying them on photos to keep text legible:

.hero {

  background:

    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)),

    url('photo.jpg') center / cover no-repeat;

}

The gradient is listed first so it renders on top. Replace the rgba values with a brand colour for a tinted overlay.

Rainbow Gradient

A full-spectrum rainbow uses all seven spectral colours as stops:

background: linear-gradient(90deg, #ff0000, #ff7700, #ffff00, #00cc00, #0000ff, #8b00ff);

For a smoother transition, add more intermediate stops between primary colours.

Animating a Gradient

CSS can't directly interpolate between gradient stops, but you can simulate animation using background-size and background-position:

.animated {

  background: linear-gradient(270deg, #6c63ff, #f43f8a, #6c63ff);

  background-size: 400% 400%;

  animation: gradientShift 4s ease infinite;

}



@keyframes gradientShift {

  0% { background-position: 0% 50%; }

  50% { background-position: 100% 50%; }

  100% { background-position: 0% 50%; }

}

This creates a looping colour shift with pure CSS — no JavaScript required.

Applying a Gradient to Text

To apply a gradient fill to text:

.gradient-text {

  background: linear-gradient(135deg, #6c63ff, #f43f8a);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}

This works in all modern browsers. The -webkit- prefixes are still needed for Safari compatibility.

Using CSS Custom Properties with Gradients

For reusable, themeable gradients, define your colours as CSS variables:

:root {

  --grad-start: #6c63ff;

  --grad-end: #f43f8a;

}



.hero {

  background: linear-gradient(135deg, var(--grad-start), var(--grad-end));

}



@media (prefers-color-scheme: dark) {

  :root {

    --grad-start: #3b1fa8;

    --grad-end: #a0155a;

  }

}

JavaScript can update these at runtime for user-controlled or animated gradients.

Mesh Gradients

A mesh gradient stacks multiple radial gradients to create a soft, multi-directional colour blend:

.mesh {

  background:

    radial-gradient(at 20% 30%, #6c63ff 0px, transparent 50%),

    radial-gradient(at 80% 70%, #f43f8a 0px, transparent 50%),

    radial-gradient(at 50% 50%, #68d391 0px, transparent 60%);

  background-color: #0f172a;

}

Each blob fades to transparent and blends with its neighbours. Adjust the at x% y% positions to reposition the colour centres.

Quick Reference: Linear Gradient Angles

Tools

Writing gradient CSS by hand is tedious. Use the CSS Gradient Generator on SnappyTools — add colour stops, adjust the angle, switch between linear/radial/conic, and copy the ready-to-use CSS in one click. It also exports Tailwind gradient classes if you're using a utility-first framework.

Summary

• Use linear-gradient for directional fades and hero sections


• Use radial-gradient for spotlights, glows, and mesh effects


• Use conic-gradient for charts and colour wheels


• Add multiple colour stops for richer blends


• Animate with background-size + background-position — no JavaScript needed


• Use CSS custom properties for themeable gradients in design systems