CSS Gradients: Copy-Paste Examples and How They Work

The three gradient functions

• linear-gradient - colors blend along a straight line, in a direction you set.
• radial-gradient - colors blend outward from a center point, like a spotlight.
• conic-gradient - colors sweep around a center point like a clock, great for pie charts and color wheels.

All three take a list of color stops, and you can add a position to any stop to control where it lands.

Direction and angles (linear)

You set a linear gradient's direction with a keyword (to right, to bottom right) or an angle. For angles, 0deg points up and it goes clockwise:

• 0deg = bottom to top
• 90deg = left to right
• 180deg = top to bottom (the default)
• 135deg = top-left to bottom-right (the classic diagonal)

Copy-paste examples

Classic diagonal (two colors)

background: linear-gradient(135deg, #6a11cb, #2575fc);

Warm sunset

background: linear-gradient(135deg, #ff512f, #dd2476);

Three color stops

background: linear-gradient(90deg, #f6d365, #fda085, #fbc2eb);

Radial spotlight

background: radial-gradient(circle at 50% 30%, #43cea2, #185a9d);

Conic color wheel

background: conic-gradient(from 0deg, #ff0080, #ff8c00, #40e0d0, #ff0080);

Hard-stop split (no blend)

background: linear-gradient(90deg, #2575fc 50%, #6a11cb 50%);

Two stops at the same position create a crisp edge instead of a blend. Great for two-tone backgrounds.

Two tricks worth knowing

Dark overlay on a photo (so text stays readable)

background:
  linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
  url('/hero.jpg');
background-size: cover;

A flat semi-transparent gradient layered over an image darkens it evenly so white text pops.

Gradient text

.gradient-text {
  background: linear-gradient(90deg, #6a11cb, #2575fc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Clip the background to the text shape and make the text transparent so the gradient shows through.

Transparency and color stops

Use rgba() or the transparent keyword for fades. A gradient from a color to transparent is how you make an image fade out at the edge or build a soft scrim. And you can pin any stop with a percentage, so #000 0%, #000 40%, transparent 100% holds solid black for the first 40% then fades. Positioning stops is where gradients go from "fine" to "designed."

Build and convert without the guesswork

Hand-tweaking hex values and angles gets old fast. The color and gradient converter lets you pick colors visually, drag the stops, set the angle, and copy the finished CSS, so you skip the trial and error. It also converts a color between HEX, RGB and HSL, which is handy when a design hands you one format and your code wants another. Need a palette to start from? Pull colors out of an image with the color palette extractor.

One accessibility caveat

Text on a gradient is the easy way to fail a contrast check. A color that reads fine at the light end of the gradient can vanish at the dark end. If you put text over a gradient, check the contrast at both ends, or add a solid or semi-transparent overlay behind the text so it stays readable everywhere.

FAQ

How do I set the direction of a linear gradient?

Use a keyword like to right or an angle like 135deg. Angles start at 0deg pointing up and increase clockwise, so 90deg goes left to right.

How do I make a gradient with more than two colors?

List as many color stops as you want, separated by commas: linear-gradient(90deg, #f6d365, #fda085, #fbc2eb). Add percentages to control where each lands.

Can I put a gradient on text?

Yes. Set the gradient as the element's background, add background-clip: text (with the -webkit- prefix), and make the text color transparent.

How do I make a sharp line instead of a blend?

Put two color stops at the same position, like #2575fc 50%, #6a11cb 50%. That creates a hard edge with no transition.