How to Use CSS Gradients: A Complete Guide with Copy-Paste Code

CSS gradients let you blend two or more colors smoothly without a single image — they're resolution-independent, fast and fully customizable. This guide covers everything you need to start using them today, with copy-paste code you can drop into any project.

Want to skip the syntax and just grab one? Browse the PaletteCSS gradients gallery and copy the CSS in one click.

The three types of CSS gradients

1. Linear gradients

A linear gradient transitions colors along a straight line:

.box {
  background: linear-gradient(135deg, #ff8a3d 0%, #f4600a 100%);
}

The angle (135deg) sets the direction. Learn when to reach for this in linear vs radial gradients.

2. Radial gradients

A radial gradient radiates outward from a center point:

.box {
  background: radial-gradient(circle, #ff5fa2 0%, #b66cf2 100%);
}

3. Conic gradients

A conic gradient rotates colors around a center — perfect for pie charts and color wheels:

.box {
  background: conic-gradient(from 0deg, #ff5fa2, #b66cf2, #33c9c0, #ff5fa2);
}

How to add a gradient background

The most common use is a full-bleed background. We cover this step-by-step in how to add a gradient background in CSS. The short version:

body {
  min-height: 100vh;
  background: linear-gradient(120deg, #a18cd1 0%, #fbc2eb 100%);
}

Gradient text and buttons

You can even apply a gradient to text using background-clip:

.gradient-text {
  background: linear-gradient(95deg, #ff5fa2, #b66cf2, #33c9c0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

For the full property reference, see the MDN gradient documentation.

Frequently asked questions

Are CSS gradients better than images?

Usually yes — they scale to any size, add zero HTTP requests, and are easy to tweak. Use images only for photographic textures.

Where can I find ready-made CSS gradients?

The PaletteCSS gradients gallery has thousands of linear and radial gradients with copy-paste CSS.

Next, pair your gradient with a matching scheme from our color palettes library, or try the best CSS gradient generator workflow.