How to Make Gradient in CSS: A Complete Linear Gradient CSS Tutorial

Learning how to make gradient in CSS is one of the most rewarding skills for any front-end developer. Gradients let you create stunning backgrounds, buttons, and text effects without a single image file. This css gradient tutorial covers everything from basic linear gradients to advanced conic patterns — with copy-paste code examples throughout.

What Is a CSS Gradient?

A CSS gradient is a smooth transition between two or more colors, rendered entirely by the browser using math. Because gradients are generated rather than downloaded, they are resolution-independent and load instantly. CSS supports three main gradient types: linear-gradient, radial-gradient, and conic-gradient.

Linear Gradient CSS — The Basics

The linear-gradient() function creates a gradient that flows in a straight line. This is the most common type and the foundation of this linear gradient css guide.

Syntax

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

• direction — An angle in degrees (e.g. 45deg) or a keyword (to right, to bottom left).
• color-stop — A color value with an optional position (percentage or length).

Simple Two-Color Gradient

.hero {
  background: linear-gradient(to right, #6366f1, #a855f7);
}

This creates a smooth purple gradient flowing left to right.

Angled Gradient

.card {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
}

Angles start at 0deg (bottom-to-top) and rotate clockwise. 90deg goes left-to-right; 180deg goes top-to-bottom.

Multiple Color Stops

You can add as many color stops as you like. Each stop takes a color plus an optional position:

.rainbow-bar {
  background: linear-gradient(
    to right,
    #ef4444 0%,
    #f97316 20%,
    #eab308 40%,
    #22c55e 60%,
    #3b82f6 80%,
    #a855f7 100%
  );
}

Hard stops (no blending) are possible by placing two stops at the same position:

.stripe {
  background: linear-gradient(
    to right,
    #6366f1 50%,
    #a855f7 50%
  );
}

Radial Gradient

A radial-gradient() emanates outward from a central point, like a light source.

.spotlight {
  background: radial-gradient(circle at center, #fbbf24, #1e293b);
}

You can control the shape (circle or ellipse), position, and size:

.glow {
  background: radial-gradient(
    ellipse 80% 60% at 50% 40%,
    rgba(99, 102, 241, 0.4),
    transparent
  );
}

Conic Gradient

Conic gradients rotate colors around a central point — great for pie charts and color wheels.

.pie-chart {
  background: conic-gradient(
    #6366f1 0deg 120deg,
    #a855f7 120deg 240deg,
    #ec4899 240deg 360deg
  );
  border-radius: 50%;
}

Practical Use Cases

Hero Section Background

.hero {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4f46e5 100%);
  min-height: 100vh;
}

Gradient Button

.btn-gradient {
  background: linear-gradient(to right, #6366f1, #a855f7);
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-gradient:hover {
  opacity: 0.85;
}

Text Gradient (Webkit Clip)

.gradient-text {
  background: linear-gradient(to right, #6366f1, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 3rem;
  font-weight: 800;
}

Layered Gradients

CSS allows multiple gradient layers separated by commas. They stack from top to bottom:

.layered {
  background:
    linear-gradient(135deg, rgba(99, 102, 241, 0.6), transparent 60%),
    linear-gradient(225deg, rgba(168, 85, 247, 0.6), transparent 60%),
    #0f172a;
}

Browser Support

All three gradient functions (linear-gradient, radial-gradient, conic-gradient) are supported in all modern browsers. conic-gradient has full support since Chrome 69, Firefox 83, and Safari 12.1. No vendor prefixes are needed for modern targets, though the -webkit- prefix is still useful for the text-gradient clip trick.

Tips for Great CSS Gradients

• Use subtle angles — A slight 160deg diagonal feels more dynamic than a flat horizontal.
• Limit stops — Two or three stops usually look cleaner than five or more.
• Choose analogous colors — Colors neighboring each other on the color wheel blend more naturally.
• Add transparency — Gradient overlays using rgba() preserve the texture underneath.
• Test on dark and light backgrounds — A gradient that looks great on white may need adjustment on dark themes.

Summary

This css gradient tutorial walked through all three CSS gradient types. The linear gradient css syntax is flexible enough to cover almost every design need, from simple backgrounds to complex layered effects. Radial and conic gradients unlock even more creative possibilities. Experiment with angles, color stops, and transparency to build something unique.

Use our free CSS Gradient Generator to design and preview gradients visually — no coding required. Instant live preview, one-click copy.