CSS Gradient Generator

CSS gradients: syntax, angles and practical use

A CSS gradient fills an element with a smooth transition between colors instead of a flat fill. Because it is generated by the browser rather than downloaded as an image, a gradient costs no extra request, scales to any size without artifacts, and can be animated through custom properties. That combination is why gradients remain common in hero sections, buttons, badges and chart backgrounds.

The syntax

The basic form is linear-gradient(angle, color-stop, color-stop). The angle is optional; when omitted it defaults to 180deg (top to bottom). Color stops can be plain colors or colors with a position, such as #ff6633 0%, and you can add as many stops as you like. The generated code above uses the two-stop form, which covers most real cases.

Gradients are values of the background-image property, not background-color. That matters when you combine them: background: linear-gradient(…), url(hero.jpg); layers the gradient over the image, and ordering determines which sits on top.

Reading the angle

Angles in CSS gradients follow the compass convention rather than the mathematical one: 0deg points to the top, and values increase clockwise. So 90deg goes left to right, 180deg top to bottom, and 270deg right to left. If you prefer, keyword directions such as to bottom right are equivalent and often easier to read in a codebase.

Getting smooth results

Transitions between two very different hues can show a muddy midpoint, or visible banding on wide elements. Two practical fixes: keep the two colors reasonably close in lightness, and add an intermediate stop near the middle so the interpolation stays in a similar part of the color space. Gradients defined in oklch() or lab() interpolate more perceptually evenly and are now supported in current browsers.

Banding on large, low-contrast gradients is a display artifact rather than a CSS bug. A subtle background-image noise overlay, or slightly increasing the contrast between stops, usually removes it.

Accessibility

Text placed over a gradient must be checked against the lightest and darkest points of that gradient, not just the average. Use the WCAG contrast checker with the worst-case pair — typically white text on the lightest stop. If it fails there, darken the gradient or add a solid overlay behind the text.

Performance notes

Gradients are cheap: they are painted, not fetched. Animating a gradient by changing colors triggers repaints, so for motion prefer transforming a larger element or animating background-position on a repeating gradient. Very large elements with many stops are the main cost.

Need the two colors first? Generate them with the palette generator or the color wheel so the gradient inherits an existing palette instead of introducing two new colors.

Five recipes worth memorising

Hero overlay: stack a translucent dark gradient over a photo so white text stays readable near the top — background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.15)), url(hero.jpg). Gradient text: paint the background as a gradient and clip it to the glyphs with background-clip: text plus a transparent text color; keep the two stops close in lightness so no part of the word disappears. Fade to background: end a stop at transparent to blend any block into the page edgelessly. Skeleton shimmer: a repeating linear gradient animated through background-position is the classic loading placeholder. Gradient border: give the parent a gradient background, a few pixels of padding and the child a solid background — a portable trick that avoids border-image’s rough edges.

How gradient interpolation actually behaves

A two-stop gradient mixes its colors along a straight line in RGB space, which is why orange-to-blue can pass through a dull grey-brown midpoint: halfway between those hues lands near the origin of the cube, which is not a color anyone would choose deliberately. Two countermeasures: add an intermediate stop you picked on purpose (a warm mid-orange between the orange and the blue keeps the blend saturated), or interpolate in a modern color space — current CSS accepts per-stop color spaces, and mixing in oklch() keeps brightness even where sRGB dips.

Fallbacks, prefixes and printing

Declare a solid background-color on the line before your gradient: engines that ignore the gradient keep the fallback, and it also shows during dynamic transitions between gradients. The old -webkit- prefixes are no longer needed in current browsers. For print, gradients are dropped by default to save ink — print-color-adjust: exact tells the engine to keep them, which matters for tickets, reports and anything users may actually print.

radial() and conic() at a glance

This tool generates linear-gradient(), but the same syntax family covers the others. radial-gradient(circle at 30% 40%, #ffd166, transparent) makes soft light spots and vignettes; the position accepts any percentage pair, and the shape keyword sets the geometry. conic-gradient(from 0deg, #2457d6, #d6245e, #2457d6) sweeps around a center — the fast way to build pie charts, dials and hue wheels without SVG. Both mix colors the same way linear does, so everything above about muddy midpoints applies to them too.

For the stops themselves, resist inventing two new colors per gradient: take a base from your palette scale and derive the second stop by moving lightness, and the result will sit in the same design language as the rest of the page.

Frequently asked questions

What is the CSS linear-gradient syntax?

linear-gradient(angle, from-color, to-color), for example linear-gradient(120deg, #ff6633, #2457d6). It is used directly as the value of the background property.

Which direction does the angle refer to?

0deg points up, 90deg points right, 180deg points down and 270deg points left. The CSS default is 180deg (top to bottom).