CSS Gradient Guide: Linear, Radial & Copyable Examples

A CSS gradient blends two or more colors across an element without needing an image file. Use a linear-gradient() for a directional transition or radial-gradient() for a transition that radiates from a point. Color stops control where each color appears.

Here are practical examples and a visual way to adjust the colors, angle, and positions before copying the CSS into your project.

Open the CSS Gradient Generator →

Linear vs radial gradients

Linear: colors blend along a line. Use it for hero backgrounds, banners, buttons, and directional highlights.
Radial: colors blend outward from a center or focal point. Use it for glows, spotlights, and soft decorative backgrounds.

Understand color stops and angles

A color stop is a color and an optional position along the gradient. The browser blends between neighboring stops. A linear angle changes the direction of travel; adding positions gives you more control over how quickly colors transition.

In CSS, 90deg travels from left to right, while 180deg travels from top to bottom. If the result looks reversed, change the angle and preview it rather than guessing.

Copyable CSS examples

Simple two-color background

.hero {
  background: linear-gradient(135deg, #0f766e, #0891b2);
}

Three-stop linear gradient

.banner {
  background: linear-gradient(90deg,
    #0f766e 0%,
    #38bdf8 55%,
    #a78bfa 100%
  );
}

Soft radial highlight

.card {
  background: radial-gradient(circle at top right,
    #d1fae5,
    #ffffff 65%
  );
}

Keep text readable. Check the contrast where text overlaps the gradient, especially if colors change across the text area. A gradient can look attractive and still make labels difficult to read.

How to create a gradient visually

Choose linear or radial.
Set the main colors and add stops if needed.
For a linear gradient, adjust the angle; for radial, choose the shape and focal position.
Preview the result at the size where it will appear.
Copy the generated CSS and paste it into your stylesheet or component.

Frequently asked questions

Do CSS gradients need an image file?

No. The browser renders CSS gradients directly, so you can use them as a background without downloading a raster image.

Can I use more than two colors?

Yes. Add color stops to place additional colors along a linear or radial gradient.

Can a gradient be used for text?

Yes. A common technique applies a gradient background to the text element and clips the background to the text. Test browser support and a readable fallback for your audience.

Why does my gradient direction look different?

CSS angles describe the direction of the gradient line. Try a few angles in the live preview to see which direction matches your layout.

Build and copy your gradient

Use the free CSS Gradient Generator to preview linear and radial gradients, adjust color stops, and copy the resulting CSS.