How to Make CSS Gradients

Gradients are one of the highest-impact, lowest-effort ways to make a page feel polished. Modern CSS makes them simple — no images, no libraries — once the syntax clicks. Here is the practical version, with the parts that actually trip people up.

A gradient is an image, not a color

The first thing to internalize: linear-gradient() and radial-gradient() produce an image, so they belong on the background (or background-image) property, not color or background-color. That is why you write:

background: linear-gradient(90deg, #6366f1, #ec4899);

Linear gradients

A linear gradient blends colors along a straight line. The first value is the direction, and the rest are color stops:

linear-gradient(<angle>, color1, color2, ...)

You can express direction two ways:

• Angles — 0deg points up, 90deg right, 180deg down, 270deg left. Angles increase clockwise, which surprises people used to math conventions.
• Keywords — to right, to bottom, to bottom right. Readable and often clearer than an angle.

So linear-gradient(to right, #000, #fff) fades black to white left-to-right, identical to linear-gradient(90deg, #000, #fff).

Radial gradients

A radial gradient radiates outward from a center point instead of along a line:

radial-gradient(circle, #6366f1, #0f172a)

Use circle for a symmetric glow or ellipse (the default) to stretch with the box. You can also move the center with at, e.g. radial-gradient(circle at top left, ...) — handy for a spotlight effect or a soft highlight in a corner.

Color stops: where the real control is

Each color can carry a position from 0% to 100%, telling the browser exactly where that color sits along the gradient:

linear-gradient(90deg, #6366f1 0%, #ec4899 100%)

Move the stops closer together and the transition sharpens; spread them apart and it softens. Add a third or fourth stop for multi-color blends. A common design pattern is an off-center midpoint — placing the second stop at 40% rather than 50% shifts the visual weight and looks less mechanical.

Hard stops (stripes and flat bands)

If two stops share the same position, the color changes instantly instead of blending — a “hard stop.” This is how you make stripes or two-tone backgrounds without images:

linear-gradient(90deg, #6366f1 50%, #ec4899 50%)

That produces a clean half-and-half split down the middle.

Layering and subtle depth

You can stack multiple gradients (and images) by comma-separating them on the background property, top layer first. A favorite trick for depth is a barely-there gradient overlay — a semi-transparent dark-to-transparent linear gradient on top of a photo makes overlaid white text readable without a heavy box.

Common mistakes

• Putting a gradient on background-color. It silently does nothing — gradients are images. Use background.
• Confusing angle direction. 0deg is up and angles go clockwise, so 45deg heads toward the top-right, not bottom-right.
• Muddy midpoints. Blending two colors from opposite sides of the wheel (say blue to orange) passes through a dull gray middle. Pick colors closer in hue, or add a bridging stop.
• Reaching for vendor prefixes. -webkit-linear-gradient is long obsolete; plain linear-gradient works in every current browser.

Picking colors that blend well

Gradients look best between colors that are close in hue or brightness. If you are not sure which colors pair well, start from a single base color and use its analogous neighbors — the Color Palette Generator gives you those instantly. To convert a color you already have into HEX, RGB or HSL, use the Color Converter.

Build one visually

Rather than hand-tuning percentages, use the free CSS Gradient Generator. Add color stops, drag their positions, spin the angle, and copy production-ready CSS — with a live preview so you can see exactly what you are shipping.