CSS Gradient Guide: Mastering Linear, Radial, and Conic Gradients

What Are CSS Gradients?

CSS gradients let you transition smoothly between two or more colors without using any image files. They render at any resolution, scale with the viewport, and download instantly since the browser generates them on the fly.

You can use gradients anywhere a CSS <image> value is accepted — background, border-image, list-style-image, and even mask-image. That flexibility makes them one of the most powerful visual tools in CSS.

The Three Gradient Types

CSS provides three gradient functions, each producing a different visual pattern:

All three share the same color stop syntax, so once you understand stops you can apply that knowledge across every type.

Linear Gradients

A linear gradient transitions colors along a straight axis. You control the direction with an angle or a keyword.

/* Direction keyword */
background: linear-gradient(to right, #3B82F6, #8B5CF6);

/* Angle in degrees */
background: linear-gradient(135deg, #3B82F6, #8B5CF6);

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

Angles vs. Direction Keywords

Angles give you finer control. A direction of 137deg has no keyword equivalent — use the degree value when you need precision.

Multi-Stop Gradients

You can add as many color stops as you want. The browser distributes them evenly by default, or you can specify exact positions.

/* Evenly distributed */
background: linear-gradient(to right, #EF4444, #F59E0B, #10B981, #3B82F6);

/* Custom positions */
background: linear-gradient(to right, #3B82F6 0%, #8B5CF6 50%, #EC4899 100%);

Position values use percentages or length units. If you skip positions, the browser calculates them automatically based on the number of stops.

Radial Gradients

A radial gradient expands outward from a center point. You control the shape, size, and position.

/* Basic radial gradient */
background: radial-gradient(#3B82F6, #1E3A5F);

/* Custom shape and size */
background: radial-gradient(circle at top left, #3B82F6, #1E3A5F);

/* Ellipse (default) with explicit size */
background: radial-gradient(ellipse 80% 50% at 50% 50%, #3B82F6, #1E3A5F);

Shape and Size Options

Use circle when you want uniform expansion. Use ellipse (or omit the shape) for backgrounds that stretch with the container.

Positioning the Center

Place the gradient origin with the at keyword followed by coordinates:

background: radial-gradient(circle at 75% 25%, #3B82F6, #1E3A5F);

Coordinates can be percentages, pixels, or keywords like top left and center center.

Conic Gradients

A conic gradient rotates color stops around a center point. Think of a color wheel or a pie chart.

/* Basic conic gradient */
background: conic-gradient(#3B82F6, #8B5CF6, #3B82F6);

/* Pie chart effect */
background: conic-gradient(#3B82F6 0% 25%, #10B981 25% 50%, #F59E0B 50% 75%, #EF4444 75% 100%);

/* Rotated start angle */
background: conic-gradient(from 45deg, #3B82F6, #8B5CF6, #3B82F6);

Hard-Edge Stops

When two color stops share the same position, the transition becomes a hard edge — no smooth blend. This is the key technique for pie charts and color wheels.

background: conic-gradient(
  #3B82F6 0deg 90deg,
  #10B981 90deg 180deg,
  #F59E0B 180deg 270deg,
  #EF4444 270deg 360deg
);

Color Stops and Positions

Color stops define what colors appear and where. Every gradient function shares this syntax.

Basic Rules

• Stops are listed in order from start to end
• Each stop has a color and an optional position
• Positions can overlap for hard transitions
• You can mix units (px, %, em) but percentages are most common

/* Two-color stop with hint */
background: linear-gradient(to right, #3B82F6, 30%, #8B5CF6);

/* The 30% is a color hint — it shifts the midpoint of the transition */

Transparency Gradients

Use transparent or RGBA/HSLA values to create fade effects:

/* Fade to transparent */
background: linear-gradient(to bottom, rgba(59, 130, 246, 0.8), transparent);

This technique is perfect for overlay gradients on hero sections — you darken the bottom without hiding the background image underneath.

Repeating Gradients

Each gradient type has a repeating- variant that tiles the pattern. The last color stop's position sets the tile size.

/* Vertical stripes */
background: repeating-linear-gradient(
  45deg,
  #3B82F6 0px,
  #3B82F6 10px,
  #8B5CF6 10px,
  #8B5CF6 20px
);

/* Radial rings */
background: repeating-radial-gradient(
  circle,
  #3B82F6 0px,
  #3B82F6 10px,
  #1E3A5F 10px,
  #1E3A5F 20px
);

/* Conic color wheel */
background: repeating-conic-gradient(
  #3B82F6 0deg 30deg,
  #8B5CF6 30deg 60deg
);

Repeating gradients are valuable for creating texture patterns — stripes, checkerboards, and rings — without any image assets.

Practical Design Patterns

Glossy Buttons

.glossy-btn {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0) 50%,
    rgba(0, 0, 0, 0.1) 100%
  ),
  #3B82F6;
}

Elevated Cards

.card {
  background: linear-gradient(135deg, #1E293B, #334155);
  border-radius: 12px;
}

Hero Overlays

.hero {
  background: linear-gradient(
    to bottom,
    transparent 40%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

Subtle Texture with Repeating Gradient

.texture-bg {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255, 255, 255, 0.03) 2px,
    rgba(255, 255, 255, 0.03) 4px
  );
}

Key Takeaways

• CSS gradients replace image files with Resolution-independent, instantly-loading visuals
• Use linear-gradient for directional flows, radial-gradient for spotlights and focal points, conic-gradient for pie charts and color wheels
• Color stop positions give you precise control over where each color appears
• Overlapping stops create hard edges for patterns and geometric effects
• repeating-* variants tile the pattern for textures like stripes and rings
• Always include a transparent stop or low-alpha color for overlay effects

Try It Yourself

Build and preview CSS gradients interactively with our CSS Gradient Generator. Adjust angles, add color stops, and copy the generated code directly into your project.

Related Guides

• CSS Linear Gradient Tutorial — Deep dive into angles, directions, and advanced multi-stop techniques
• CSS Design Tips — Combine gradients with shadows and color for polished UIs