CSS Gradient Generator

How to build a gradient that does not look cheap

A CSS gradient is just an image the browser paints for you. You describe a direction or a center point, then a list of color stops, and the engine fills every pixel in between. The syntax is simple. The hard part is taste, and most bad gradients fail for the same three reasons: muddy midpoints, too many hues, and visible banding.

Pick the right type

• Linear runs along a straight line at an angle. 0deg points up, 90deg points right, and angles go clockwise. Use it for buttons, hero washes and section dividers.
• Radial spreads from a center point. Moving that center off canvas (try X at 85%, Y at 0%) gives you the soft corner glow that premium landing pages lean on.
• Conic sweeps around a center like a clock hand. It powers pie charts, color wheels, loading rings and the shimmering border effect you see on product launch pages.

Fix the gray dead zone with OKLCH

By default, browsers blend colors in sRGB. When you go from blue to yellow, the straight line between them in sRGB passes through a dull gray. Modern CSS lets you choose the color space used for interpolation. in oklch keeps chroma up and travels around the hue wheel, so blue to yellow passes through green or pink instead of mud. in oklab is the calmer choice: perceptually even, no surprise hues. Toggle the blending menu above with a blue to orange gradient and the difference is obvious.

.hero {
  /* fallback for older browsers */
  background: linear-gradient(135deg, #2563eb 0%, #f59e0b 100%);
  /* modern browsers use this */
  background: linear-gradient(135deg in oklch, #2563eb 0%, #f59e0b 100%);
}

The tool writes both lines when you pick OKLCH or OKLab. A browser that does not understand the second declaration ignores it and keeps the first.

Stops, hard edges and hints

Each stop is a color plus an optional position. If two adjacent stops share the same position you get a hard edge, which is how stripes and split backgrounds are made. Keep stops at least 15 to 20 percent apart for smooth blends, and use a third stop only when you want to steer the middle color rather than adding a third hue for decoration. Two analogous colors almost always look more expensive than four unrelated ones.

Avoid banding on large areas

Low-contrast gradients stretched across a full-width hero can show visible steps, especially on 8-bit displays. Three tactics help: widen the color difference slightly, interpolate in OKLab, or layer a faint noise texture on top with a second background. Dark gradients band the most, so test on a real monitor, not just your laptop.

Layering for depth

The background property accepts a comma separated list, painted top to bottom. A common pattern is a soft radial highlight over a linear base: background: radial-gradient(circle at 80% 0%, #ffffff33, transparent 60%), linear-gradient(160deg, #0b2448, #0a0d26);. Use transparent stops on top layers so the base shows through.

Sharing your work

Every change is written to the page address, so the link in your browser bar reopens this exact gradient. Paste it into a ticket or a design review and your teammate sees the same stops, angle and blending mode.

Frequently asked questions