CSS Gradient Guide: Linear, Radial, and Conic Gradients

CSS gradients let you create smooth transitions between two or more colors directly in the browser, without a single image request. Introduced in CSS3 and now universally supported, gradients have evolved from simple two-stop fades into sophisticated visual elements capable of producing textures, geometric patterns, and dimensional effects. This guide walks through every type of CSS gradient, explains the syntax in detail, and shows practical hex-code examples you can drop directly into your stylesheets.

What Is a CSS Gradient?

A CSS gradient is a special type of <image> value. It generates a color transition programmatically, meaning the browser calculates the intermediate colors between your defined color stops. Because gradients are images rather than colors, you apply them with background-image or the shorthand background property — not background-color.

The three gradient types in CSS are:

• linear-gradient() — colors transition along a straight line
• radial-gradient() — colors radiate outward from a central point
• conic-gradient() — colors rotate around a central point

Each type also has a repeating-* variant (repeating-linear-gradient(), repeating-radial-gradient(), repeating-conic-gradient()) that tiles the gradient pattern across the element.

Linear Gradients

A linear gradient draws a color transition along a straight line at a specified angle.

Basic Syntax

background: linear-gradient(direction, color-stop1, color-stop2, ...);

The direction parameter is optional. Without it, the gradient flows from top to bottom (equivalent to to bottom or 180deg).

/* Top to bottom (default) */
background: linear-gradient(#3B82F6, #1E3A8A);

/* Left to right */
background: linear-gradient(to right, #3B82F6, #1E3A8A);

/* Diagonal */
background: linear-gradient(to bottom right, #3B82F6, #1E3A8A);

Angle Syntax

Angles are measured in degrees clockwise from the top of the element. 0deg points upward, 90deg points right, 180deg points downward.

/* 45-degree diagonal from bottom-left to top-right */
background: linear-gradient(45deg, #FF6B6B, #FFC300);

/* 135-degree diagonal from top-left to bottom-right */
background: linear-gradient(135deg, #667EEA, #764BA2);

A common use case is a hero section background. For example, a gradient from #667EEA to #764BA2 at 135 degrees produces a cool purple diagonal that works well behind white text.

Direction Keywords

Instead of angles, you can use directional keywords:

Keywords are more readable in code reviews and self-documenting. Reserve explicit degrees for precise angles that do not fall on a diagonal.

Multiple Color Stops

Color stops define where each color begins and ends along the gradient line. You can use any CSS length or percentage as a position.

/* Three-stop gradient */
background: linear-gradient(to right, #FF6B6B, #FFD93D, #6BCB77);

/* Positioned stops */
background: linear-gradient(to right,
  #FF6B6B 0%,
  #FFD93D 50%,
  #6BCB77 100%
);

/* Hard color stop (no transition) */
background: linear-gradient(to right,
  #FF6B6B 0%,
  #FF6B6B 50%,
  #6BCB77 50%,
  #6BCB77 100%
);

The hard color stop technique — setting two stops at the same position — creates a sharp edge between colors with no blending. This is useful for flag-like designs, progress indicators, or split-screen backgrounds.

Color Stop with Hints

CSS supports a midpoint hint between two color stops, giving you control over where the interpolation is fastest or slowest:

/* Gradient lingers longer in the blue range */
background: linear-gradient(to right, #3B82F6, 30%, #EF4444);

The 30% hint tells the browser that the midpoint of the transition between blue #3B82F6 and red #EF4444 should occur at the 30% mark, making the blue linger and the red appear quickly.

Radial Gradients

A radial gradient emanates outward from a center point, creating circular or elliptical patterns.

Basic Syntax

background: radial-gradient(shape size at position, color-stop1, color-stop2);

All parameters are optional. The default produces an elliptical gradient centered in the element, sized to reach the farthest corner.

/* Simple center radial */
background: radial-gradient(#FFF176, #F57F17);

/* Explicit circle */
background: radial-gradient(circle, #A8E063, #2D6A4F);

Shape

Radial gradients can be circle (uniform radius) or ellipse (default, stretches to fit the element).

/* Circle: same radius in all directions */
background: radial-gradient(circle, #FF9A9E, #A18CD1);

/* Ellipse: stretches to fit element dimensions */
background: radial-gradient(ellipse, #FF9A9E, #A18CD1);

Size Keywords

The size controls how far the gradient extends:

/* Small spotlight in the top-left */
background: radial-gradient(circle closest-side at 25% 25%,
  rgba(255,255,255,0.8),
  transparent
);

Position

The at keyword sets the center point of the gradient using any valid CSS position value:

/* Off-center gradient for a lighting effect */
background: radial-gradient(circle at 70% 30%, #FFE066, #FF6B6B, #2D3561);

/* Bottom-center spotlight */
background: radial-gradient(ellipse at 50% 100%, #667EEA, #1a1a2e);

Positioning gradients off-center creates the appearance of a light source, which is a common technique in glassmorphism and depth effects.

Conic Gradients

A conic gradient rotates colors around a central point, similar to how a pie chart is drawn. It was added to CSS later than the other types but now has full browser support.

Basic Syntax

background: conic-gradient(from angle at position, color-stop1, color-stop2, ...);

/* Basic conic gradient */
background: conic-gradient(#FF6B6B, #FFD93D, #6BCB77, #4D96FF, #FF6B6B);

/* Starting at 90 degrees */
background: conic-gradient(from 90deg, #FF6B6B, #FFD93D, #6BCB77);

Pie Charts with Conic Gradients

Conic gradients are ideal for pure-CSS pie charts:

/* Pie chart: 40% red, 35% blue, 25% green */
background: conic-gradient(
  #EF4444 0deg 144deg,
  #3B82F6 144deg 270deg,
  #22C55E 270deg 360deg
);
border-radius: 50%;

The math is simple: multiply the percentage by 3.6 to get degrees (40% × 3.6 = 144deg).

Color Wheels with Conic Gradients

A full conic gradient cycling through all hues recreates a color wheel:

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

Checkerboard and Stripe Patterns

The repeating-conic-gradient() variant creates geometric patterns:

/* Checkerboard */
background: repeating-conic-gradient(#000 0% 25%, #fff 0% 50%);
background-size: 40px 40px;

Repeating Gradients

Each gradient type has a repeating variant that tiles the defined pattern continuously:

/* Diagonal stripes */
background: repeating-linear-gradient(
  45deg,
  #F3F4F6,
  #F3F4F6 10px,
  #E5E7EB 10px,
  #E5E7EB 20px
);

/* Concentric rings */
background: repeating-radial-gradient(
  circle,
  #3B82F6,
  #3B82F6 10px,
  transparent 10px,
  transparent 30px
);

Repeating gradients are efficient for texture effects — watermark-style diagonal lines on backgrounds, or concentric rings for a targeting-reticle aesthetic.

Transparency in Gradients

Using transparent or rgba() values in gradients creates fade-in and fade-out effects:

/* Fade out at bottom (content below stays visible) */
background: linear-gradient(to bottom,
  #1E3A8A 0%,
  rgba(30, 58, 138, 0) 100%
);

/* Vignette overlay */
background: radial-gradient(ellipse at center,
  transparent 60%,
  rgba(0, 0, 0, 0.5) 100%
);

Note that transparent in CSS is rgba(0,0,0,0) — fully transparent black — which can produce unexpected gray bands when transitioning from a colored value. To avoid this, use the fully-transparent version of your color:

/* Correct: transparent version of the blue */
background: linear-gradient(to right, #3B82F6, rgba(59, 130, 246, 0));

/* Incorrect: introduces gray banding */
background: linear-gradient(to right, #3B82F6, transparent);

Layering Multiple Gradients

The background property accepts multiple comma-separated values. Each gradient is stacked on top of the previous:

/* Diagonal overlay on a solid color */
background:
  linear-gradient(135deg, rgba(255,107,107,0.3) 0%, transparent 50%),
  linear-gradient(to bottom, #1E3A8A, #2D6A9F);

/* Noise texture simulation with gradients */
background:
  repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  ),
  linear-gradient(135deg, #667EEA, #764BA2);

Layered gradients reduce HTTP requests that would otherwise require multiple background images, while giving you full CSS control over colors and dimensions.

CSS Gradient Performance

Gradients are computed by the GPU and are generally efficient. However, a few patterns are worth avoiding in performance-sensitive contexts:

• Animated gradients: CSS cannot transition between two different background-image values. Animating gradients requires either changing CSS custom properties (variables) or using JavaScript. A workaround is to animate background-position on a larger gradient.
• Complex repeating patterns: Very small repeat sizes (below 2px) on large elements force the browser to compute thousands of pixels of gradient, which can cause paint performance issues.
• Avoid filter: blur() on gradient backgrounds during animation — this is GPU-expensive and causes jank.

For gradient animation, using CSS custom properties with @property provides hardware-accelerated smooth transitions:

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.animated-gradient {
  background: linear-gradient(var(--gradient-angle), #667EEA, #764BA2);
  animation: rotate-gradient 4s linear infinite;
}

@keyframes rotate-gradient {
  to { --gradient-angle: 360deg; }
}

Using the Gradient Generator

While writing gradients by hand is valuable for understanding syntax, the Gradient Generator accelerates the process significantly. You can:

• Pick start and end colors using a visual color picker or by entering hex codes directly
• Set the gradient angle with a slider or numeric input
• Add multiple color stops at precise positions
• Preview the gradient in real-time across different element sizes
• Copy the finished CSS with one click

For example, to build a sunset gradient, enter #FF6B6B as the start color, #FFC300 at 50%, and #FF3C00 as the end, then set the angle to 135 degrees. The generator produces ready-to-use CSS that you can paste directly into your stylesheet.

Pair the generator with the Color Converter when you need to work with HSL or OKLCH values instead of hex — modern color spaces like OKLCH produce more perceptually uniform gradients because the lightness axis is truly uniform across all hues.

Practical Gradient Recipes

Hero Section Background

background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);

Deep purple-blue diagonal, suitable for SaaS landing pages.

Card Hover Effect

background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

Subtle light blue-gray gradient from #F5F7FA to #C3CFE2.

Neon Glow Button

background: linear-gradient(to right, #11998e, #38ef7d);
box-shadow: 0 4px 15px rgba(56, 239, 125, 0.4);

Vibrant green from #11998E to #38EF7D.

Dark Mode Surface

background: linear-gradient(145deg, #1E1E2E 0%, #2D2D44 100%);

Subtle dark purple-blue for dark mode card surfaces.

Mesh Gradient (approximated with layers)

background:
  radial-gradient(ellipse at 20% 20%, rgba(103,126,234,0.5), transparent 50%),
  radial-gradient(ellipse at 80% 80%, rgba(118,75,162,0.5), transparent 50%),
  radial-gradient(ellipse at 50% 50%, rgba(255,107,107,0.3), transparent 60%),
  #1a1a2e;

Key Takeaways

• CSS offers three gradient types: linear-gradient() for straight-line transitions, radial-gradient() for circular or elliptical patterns, and conic-gradient() for pie-chart style rotations around a center point.
• Each type has a repeating-* variant that tiles the gradient pattern, useful for texture effects, stripes, and geometric patterns.
• Multiple color stops with percentage or pixel positions give precise control over where transitions occur; using the same position for two stops creates a hard edge with no blending.
• Use rgba() with zero alpha (not the bare transparent keyword) to avoid gray banding when fading a color to transparency.
• Multiple gradients can be layered in a single background declaration, with each gradient positioned on top of the previous.
• The Gradient Generator lets you build complex gradients visually, with real-time preview and one-click CSS export.