How to Create CSS Gradients: Linear & Radial Guide

What Is a CSS Gradient?

A CSS gradient is a smooth transition between two or more colors created entirely in CSS — no images required. Gradients are scalable, load instantly, and can be animated. They are used everywhere from subtle button highlights to dramatic hero backgrounds.

CSS supports three gradient functions: linear-gradient(), radial-gradient(), and conic-gradient(). Each creates a different shape of transition.

Linear Gradients

A linear gradient transitions colors along a straight line. The syntax is:

background: linear-gradient(direction, color1, color2, ...);

Basic Example

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

/* Left to right */
background: linear-gradient(to right, #3b82f6, #8b5cf6);

/* 45-degree angle */
background: linear-gradient(45deg, #3b82f6, #8b5cf6);

Multiple Color Stops

You can add as many colors as you like, and even control exactly where each transition starts:

background: linear-gradient(
  to right,
  #ef4444 0%,
  #f97316 25%,
  #eab308 50%,
  #22c55e 75%,
  #3b82f6 100%
);

Hard Stops (No Blend)

Place two stops at the same position to create a sharp edge rather than a blend:

background: linear-gradient(
  to right,
  #3b82f6 50%,
  #ef4444 50%
);

Radial Gradients

A radial gradient radiates outward from a center point in an oval or circle shape.

/* Circular, centered */
background: radial-gradient(circle, #3b82f6, #1e1b4b);

/* Elliptical (default) */
background: radial-gradient(ellipse, #3b82f6, #1e1b4b);

/* Off-center spotlight */
background: radial-gradient(circle at 30% 20%, #ffffff 0%, #3b82f6 50%, #1e1b4b 100%);

Conic Gradients

Conic gradients rotate around a center point — perfect for pie charts, color wheels, and spinner animations.

/* Simple conic */
background: conic-gradient(#ef4444, #eab308, #22c55e, #3b82f6, #ef4444);

/* Pie chart slices */
background: conic-gradient(
  #ef4444 0% 30%,
  #3b82f6 30% 70%,
  #22c55e 70% 100%
);

Layering Multiple Gradients

You can layer multiple gradients on a single element by comma-separating them. The first value is on top:

background:
  radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.3) 0%, transparent 50%),
  linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);

Practical Use Cases

Buttons

.btn {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
}

Hero Backgrounds

.hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%);
  min-height: 100vh;
}

Text Gradients

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

Browser Support

Linear and radial gradients are supported by all modern browsers without prefixes. Conic gradients have been supported since Chrome 69, Firefox 83, and Safari 12.1 — covering more than 95% of global users as of 2026.

Tips for Great Gradients

• Use analogous or complementary colors from a color wheel for harmonious results.
• Subtle gradients (low contrast between stops) often look more professional than loud ones.
• Test your gradient on different screen brightness levels — what looks good at full brightness may appear washed out on a dim screen.
• Use our CSS Gradient Generator to experiment visually and then copy the ready-to-use CSS code.