DEV Community

Snappy Tools
Snappy Tools

Posted on • Originally published at snappytools.app

CSS Gradients Explained: Linear, Radial, and Conic — With Real Examples

#webdev #css #beginners #design

CSS gradients are one of those features that most developers learn just enough of to get by — usually linear-gradient(to right, #color1, #color2) — and never go deeper. But the full gradient spec is surprisingly powerful, and understanding it opens up a lot of design possibilities without reaching for an image editor.

Here's a complete walkthrough of all three gradient types, with practical examples.

The three gradient types

CSS supports three types of gradients:

  1. linear-gradient() — transitions along a straight line
  2. radial-gradient() — transitions outward from a central point
  3. conic-gradient() — transitions around a central point (like a pie chart)

All three also have repeating- variants: repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient().

linear-gradient()

The most common gradient type. Syntax:

background: linear-gradient(direction, color-stop-1, color-stop-2, ...);
Enter fullscreen mode Exit fullscreen mode

Direction options:

/* Keywords */
background: linear-gradient(to right, #2f855a, #276749);
background: linear-gradient(to bottom right, #2f855a, #276749);

/* Angle (degrees) */
background: linear-gradient(90deg, #2f855a, #276749);
background: linear-gradient(135deg, #2f855a, #276749);
Enter fullscreen mode Exit fullscreen mode
  • 0deg = bottom to top
  • 90deg = left to right
  • 180deg = top to bottom
  • 270deg = right to left

Colour stops:

You can add as many colour stops as you want, and control their positions:

/* Three-colour gradient */
background: linear-gradient(to right, #ff0000, #ffff00, #00ff00);

/* Controlled positions */
background: linear-gradient(to right, 
  #2f855a 0%,
  #2f855a 30%,   /* solid green for first 30% */
  #276749 70%,
  #1a4a3b 100%
);
Enter fullscreen mode Exit fullscreen mode

Transparency:

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

/* Image overlay — place over a background-image */
background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.7) 100%);
Enter fullscreen mode Exit fullscreen mode

This last pattern is extremely common for hero images — it darkens the bottom half to make white text readable over a photo.

radial-gradient()

Radiates outward from a centre point. Useful for glows, spotlights, and circular effects.

background: radial-gradient(shape size at position, color-stop-1, color-stop-2);
Enter fullscreen mode Exit fullscreen mode

Basic examples:

/* Circular gradient from centre */
background: radial-gradient(circle, #2f855a, #1a1a2e);

/* Ellipse (default shape) */
background: radial-gradient(ellipse, #2f855a, #1a1a2e);

/* Spotlight effect — off-centre */
background: radial-gradient(circle at 30% 40%, #ffffff 0%, #1a1a2e 80%);
Enter fullscreen mode Exit fullscreen mode

Size keywords:

Keyword Behaviour
closest-side Gradient ends at nearest side
farthest-side Gradient ends at farthest side
closest-corner Gradient ends at nearest corner
farthest-corner Gradient ends at farthest corner (default) 
/* Subtle soft glow */
background: radial-gradient(circle closest-side at 50% 50%, rgba(47,133,90,0.3) 0%, transparent 100%);
Enter fullscreen mode Exit fullscreen mode

conic-gradient()

Transitions colours around a point, like the hands of a clock sweeping around.

background: conic-gradient(from 0deg, red, yellow, green, blue, red);
Enter fullscreen mode Exit fullscreen mode

Pie chart:

/* 40% red, 35% blue, 25% green */
background: conic-gradient(
  red 0% 40%,
  blue 40% 75%,
  green 75% 100%
);
Enter fullscreen mode Exit fullscreen mode

Colour wheel:

background: conic-gradient(
  hsl(0deg, 100%, 50%),
  hsl(60deg, 100%, 50%),
  hsl(120deg, 100%, 50%),
  hsl(180deg, 100%, 50%),
  hsl(240deg, 100%, 50%),
  hsl(300deg, 100%, 50%),
  hsl(360deg, 100%, 50%)
);
border-radius: 50%;
Enter fullscreen mode Exit fullscreen mode

Multiple gradients (layering)

You can layer multiple gradients on the same element by separating them with commas. They render front-to-back:

background: 
  linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.7) 100%),
  linear-gradient(to right, rgba(47,133,90,0.3), transparent),
  url('/hero.jpg') center/cover no-repeat;
Enter fullscreen mode Exit fullscreen mode

This pattern — image with gradient overlays — is one of the most practical uses of CSS gradients.

Gradient on text

A popular visual effect: gradient-coloured text.

.gradient-text {
  background: linear-gradient(135deg, #2f855a, #276749);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
Enter fullscreen mode Exit fullscreen mode

Works in all modern browsers. The gradient is clipped to the text shape using background-clip: text.

repeating-linear-gradient()

Creates a striped or repeating pattern:

/* 10px diagonal stripes */
background: repeating-linear-gradient(
  45deg,
  #2f855a,
  #2f855a 10px,
  #276749 10px,
  #276749 20px
);
Enter fullscreen mode Exit fullscreen mode

When to use each type

Type Best for
linear-gradient Button backgrounds, hero sections, overlays, dividers
radial-gradient Glows, spotlights, circular backgrounds, vignettes
conic-gradient Pie charts, colour wheels, progress rings
repeating-* Stripes, patterns, loading indicators

Building gradients without memorising syntax

If you'd rather experiment visually than type CSS from memory, the CSS Gradient Generator at SnappyTools lets you build linear, radial, and conic gradients with a live preview, copy the CSS output, and export as Tailwind CSS classes — all in the browser with no account required.

The syntax above is worth understanding even if you use a generator, because you'll need to modify the output or debug it eventually.

The one thing most developers miss

The at position parameter for radial and conic gradients is underused. It lets you place the gradient origin exactly where you want it — which is the difference between a generic glow and a realistic spotlight effect.

/* Spotlight from top-left */
background: radial-gradient(circle at 20% 15%, rgba(255,255,255,0.15) 0%, transparent 60%);
Enter fullscreen mode Exit fullscreen mode

Pair this with a dark background colour, and you have a premium-looking card effect in about four lines of CSS.

Top comments (0)