CSS Gradient Generator

Gradients are images, not colors

A CSS gradient is generated by the linear-gradient, radial-gradient, or conic-gradient functions, and each produces an image value, not a color. That single fact explains most of how gradients behave. Because the result is an image, you assign it to a property that takes images, most often background or background-image, and it tiles, scales, and stacks like any other background. It also has no intrinsic size; it fills whatever box you put it in, which is why the same gradient can look steep on a button and gentle across a hero section.

Linear gradients and direction

A linear gradient blends colors along a straight axis. You set that axis either with an angle or with a keyword direction. Angles are measured clockwise from straight up, so 0deg runs bottom to top, 90deg runs left to right, and 180deg runs top to bottom. The keyword forms, such as to right or to bottom right, are often clearer for simple cases and have the bonus of pointing at a corner exactly, which a fixed angle cannot do as the box changes shape.

The angle slider in this tool writes the degree value for you. A subtle tip: a gradient that runs at a slight diagonal, somewhere around 135deg, almost always looks more refined than a flat vertical or horizontal blend, because the eye reads the diagonal as light raking across a surface.

Radial and conic gradients

A radial gradient blends outward from a center point in concentric rings, which is ideal for spotlights, soft vignettes, and glows. By default it forms an ellipse that fills the box, but you can make it a perfect circle and move its center, so a highlight can sit in a corner rather than dead center. Radial gradients are the natural choice whenever the light or focus should appear to come from a single point.

A conic gradient sweeps colors around a center like the hands of a clock rather than outward from it. That rotational sweep is what makes conic gradients the basis for pie charts, color wheels, and the increasingly common conic glow used as a card accent. The same color stops you already understand still apply; only the geometry of how they are laid out changes between linear, radial, and conic.

Color stops and positions

Every gradient is defined by color stops, where each stop is a color and an optional position along the gradient line, usually written as a percentage from 0 to 100. With two stops you get a simple blend; adding more lets you route the gradient through several colors. If you omit positions, the browser spreads the stops evenly, but setting them by hand is how you control exactly where each color sits and how much room each transition gets.

Positions do not have to increase smoothly, and that is where gradients get interesting. Bunching two stops close together makes a fast transition, while spreading them apart makes a slow, gentle one. You can even give two stops the same position to remove the blend entirely, which is the key to the next technique.

Hard stops: stripes, bands, and shapes

When two adjacent color stops share the same position, the transition between them happens over zero distance, producing a crisp edge instead of a blend. Repeat that pattern and you get stripes, checkerboards, progress bars, and color-coded bands, all drawn in CSS with no images. For example, a gradient that holds one color from 0 to 50 percent and a second color from 50 to 100 percent gives you a clean two-tone split down the middle.

Pair hard stops with repeating-linear-gradient or repeating-radial-gradient and the pattern tiles automatically across the box, so you can build candy stripes, diagonal hazard tape, or fine guide lines from a single short declaration. Because it is vector math rather than a bitmap, it stays razor sharp at any size and on any pixel density.

Transparency and layering

Gradient stops can use colors with an alpha channel, and fading to a fully transparent color is one of the most useful moves you can make. A gradient that runs from a solid color to transparent creates the scrim you see behind text at the bottom of a photo, the fade-out at the edge of a scrolling list, and soft image masks. One caveat: in some color interpolations, fading to plain transparent can pass through a dull gray midpoint, so fading to the same color at zero alpha rather than to a bare transparent keyword gives a cleaner result.

Because gradients are images, the background property accepts several separated by commas, painted front to back. Stacking a subtle transparent gradient over a base gradient is how rich modern backgrounds are built without a single image file.

Accessibility: text over gradients

The risk with gradients sits underneath your text. Contrast can be perfectly fine at one end of a gradient and fail badly at the other, so a headline that is readable over the dark part may vanish over the light part. Always check the worst-case region, not the average. The robust fix is to place a semi-transparent solid scrim, or a dedicated dark-to-transparent gradient, between the busy background and the text so the contrast ratio stays safe everywhere. Treat the lightest point under light text, and the darkest point under dark text, as the value you actually have to pass.