CSS Gradients: Complete Guide to Linear, Radial & Conic

What Are CSS Gradients?

CSS gradients let you create smooth transitions between two or more colors entirely in code, without needing image files. They are one of the most powerful visual tools in CSS, used for backgrounds, buttons, text effects, and decorative patterns. Every modern browser supports them, and because they are generated by the browser, they scale perfectly to any screen size and resolution.

A critical detail that trips up many developers: gradients are CSS images, not colors. This means you must apply them with background-image or the shorthand background, not with background-color.

/* WRONG - gradient won't show */
.box {
  background-color: linear-gradient(to right, red, blue);
}

/* CORRECT */
.box {
  background-image: linear-gradient(to right, red, blue);
}

/* ALSO CORRECT - shorthand */
.box {
  background: linear-gradient(to right, red, blue);
}

CSS offers three gradient types: linear (straight line), radial (outward from a center point), and conic (around a center point). Each also has a repeating variant. Let's explore them all with practical examples you can use in your projects. You can also generate gradient code visually using our CSS Gradient Generator.

Linear Gradients

A linear gradient creates a color transition along a straight line. By default it goes from top to bottom, but you can control the direction with angles or keywords.

Basic Syntax

/* Default: top to bottom */
background: linear-gradient(#3b82f6, #8b5cf6);

/* Using direction keywords */
background: linear-gradient(to right, #3b82f6, #8b5cf6);
background: linear-gradient(to bottom right, #3b82f6, #8b5cf6);

/* Using angles (0deg = to top, 90deg = to right) */
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
background: linear-gradient(45deg, #ff6b6b, #feca57, #48dbfb);

Direction Keywords

The to keyword defines where the gradient ends. to right means the gradient goes from left to right. to bottom left goes diagonally toward the bottom-left corner. When using angles, 0deg points upward, 90deg points right, 180deg points down, and 270deg points left.

Hard Color Stops (No Transition)

You can create sharp color boundaries by placing two color stops at the same position:

/* Sharp stripe — no fade between colors */
background: linear-gradient(
  to right,
  #3b82f6 0%, #3b82f6 50%,
  #8b5cf6 50%, #8b5cf6 100%
);

Radial Gradients

A radial gradient radiates outward from a center point. By default it creates an ellipse that fills the element, but you can control the shape, size, and position.

Shape and Size

/* Default: ellipse centered */
background: radial-gradient(#3b82f6, #1e3a5f);

/* Circle instead of ellipse */
background: radial-gradient(circle, #3b82f6, #1e3a5f);

/* Sized circle */
background: radial-gradient(circle 100px, #3b82f6, #1e3a5f);

/* Size keywords: closest-side, farthest-side,
   closest-corner, farthest-corner (default) */
background: radial-gradient(circle closest-side, #3b82f6, #1e3a5f);

Custom Position

/* Position the center at top-left */
background: radial-gradient(circle at top left, #3b82f6, #1e3a5f);

/* Position at specific coordinates */
background: radial-gradient(circle at 30% 70%, #ff6b6b, #1e3a5f);

/* Spotlight effect */
background: radial-gradient(
  circle 200px at 50% 30%,
  rgba(255, 255, 255, 0.3),
  transparent
);

Radial gradients are perfect for spotlight effects, glowing buttons, and circular highlights. Pair them with our Color Converter to find the perfect color values in HEX, RGB, or HSL format.

Conic Gradients

A conic gradient transitions colors around a center point, like a color wheel. It was the last gradient type added to CSS and is supported in all modern browsers.

/* Basic color wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

/* Start angle */
background: conic-gradient(from 45deg, #3b82f6, #8b5cf6);

/* Custom center position */
background: conic-gradient(from 0deg at 30% 70%, #3b82f6, #8b5cf6, #3b82f6);

/* Pie chart effect */
background: conic-gradient(
  #3b82f6 0deg 120deg,
  #8b5cf6 120deg 240deg,
  #f59e0b 240deg 360deg
);

The from keyword sets the starting angle, and at sets the center position. Conic gradients are particularly useful for pie charts, color pickers, and decorative rotating effects. Combine with border-radius: 50% for a perfect circle.

Color Stops and Transitions

Color stops control where each color appears in the gradient. You can use percentages, pixels, or other length units to precisely position them.

Positioning Color Stops

/* Even distribution (default) */
background: linear-gradient(to right, red, blue);

/* Custom positions with percentages */
background: linear-gradient(to right, red 20%, blue 80%);

/* Push color further along the gradient */
background: linear-gradient(to right, red 10%, yellow 30%, blue 90%);

/* Pixel-based stops */
background: linear-gradient(to right, red 0px, blue 200px);

Color Hints (Midpoints)

A color hint is a bare length value between two color stops that shifts the midpoint of the transition. By default, the 50% blend point is exactly halfway between two stops. A hint moves it:

/* Default: midpoint at 50% between red and blue */
background: linear-gradient(to right, red, blue);

/* Shift midpoint to 25% — blue dominates */
background: linear-gradient(to right, red, 25%, blue);

/* Shift midpoint to 75% — red dominates */
background: linear-gradient(to right, red, 75%, blue);

Gradient Text Effect

You can apply gradients to text using background-clip: text:

.gradient-text {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

This technique works in all modern browsers. The color: transparent fallback ensures accessibility for screen readers that read the text even though it is visually hidden behind the gradient.

Gradient Borders

CSS does not have a native border-image that works with border-radius, but you can fake gradient borders using a background trick:

.gradient-border {
  border: 2px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, #3b82f6, #8b5cf6) border-box;
}

The padding-box layer fills the interior with a solid color, while the border-box layer shows the gradient only in the border area. Use our CSS Unit Converter to convert between px, rem, and em for consistent border sizing.

Repeating Gradients and Creative Patterns

The repeating-linear-gradient, repeating-radial-gradient, and repeating-conic-gradient functions tile a gradient pattern that repeats infinitely. They are essential for creating stripes, checkerboards, and complex patterns without image files.

Stripe Patterns

/* Horizontal stripes */
background: repeating-linear-gradient(
  0deg,
  #3b82f6 0px, #3b82f6 10px,
  transparent 10px, transparent 20px
);

/* Diagonal stripes */
background: repeating-linear-gradient(
  45deg,
  #3b82f6 0px, #3b82f6 10px,
  #1e3a5f 10px, #1e3a5f 20px
);

/* Subtle progress bar stripes */
background: repeating-linear-gradient(
  -45deg,
  transparent 0px, transparent 8px,
  rgba(255, 255, 255, 0.1) 8px,
  rgba(255, 255, 255, 0.1) 16px
);

Radial Repeating Patterns

/* Concentric rings */
background: repeating-radial-gradient(
  circle,
  #3b82f6 0px, #3b82f6 10px,
  #1e3a5f 10px, #1e3a5f 20px
);

/* Bullseye / target */
background: repeating-radial-gradient(
  circle at center,
  red 0px, red 5px,
  white 5px, white 10px
);

Layering Multiple Gradients

You can combine multiple gradients by comma-separating them. The first gradient is on top:

/* Grid / plaid pattern */
background:
  repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 48px,
    rgba(0, 0, 0, 0.05) 48px, rgba(0, 0, 0, 0.05) 50px
  ),
  repeating-linear-gradient(
    90deg,
    transparent 0px, transparent 48px,
    rgba(0, 0, 0, 0.05) 48px, rgba(0, 0, 0, 0.05) 50px
  );

Experiment with all these patterns visually using our CSS Gradient Generator — adjust colors, angles, and stops in real time, then copy the CSS with one click.

Frequently Asked Questions

Related Tools