CSS gradient generator

How to use this CSS gradient generator

Start by picking a type. In a linear gradient, colors move along a straight line, and the angle control (0 to 360°) sets the direction. In a radial gradient, colors spread out from the center, and you choose the shape: circle or ellipse (which follows the element's aspect ratio).

Next, tune the color stops. The generator takes 2 to 6 stops, each with its own color picker and a position from 0 to 100%. Add a stop when you need an in-between shade and remove any that don't change the result. If you'd rather start from something ready-made, apply one of the presets and adjust from there. The preview updates as you work, the copy button gives you a background: linear-gradient(...) line ready to paste into your stylesheet, and you can also download the gradient as a PNG image for places that don't accept CSS, such as slide decks or social media graphics.

linear-gradient and radial-gradient syntax

A CSS gradient is an image the browser draws, so it goes in background (or background-image), not in background-color. The linear form takes an optional direction followed by the color list:

.hero { background: linear-gradient(135deg, #FF7F50 0%, #E2725B 100%); }

The radial form takes the shape first and, optionally, the center point:

.badge { background: radial-gradient(circle at center, #FFD700 0%, #FFA500 100%); }

With no direction, a linear gradient runs top to bottom; with no shape, a radial gradient uses ellipse. The full reference for both functions is on MDN.

Angles and direction keywords

In CSS, 0deg points up and angles grow clockwise: 90deg points right, 180deg down and 270deg left. Keywords are readable equivalents: to right equals 90deg and to bottom equals 180deg.

Diagonals are where they differ. to bottom right is not always 135deg: the browser picks the angle so that the top-left and bottom-right corners get exactly the end colors, which means it changes with the element's proportions. On a square it's 135°; on a wide banner it sits closer to horizontal. Use the keyword when you want the gradient to follow the shape of the box, and a fixed angle when you need the same slope across elements of different sizes.

Color stops and hard stops

Each stop marks where a color reaches full strength. Between two stops the browser interpolates; before the first stop and after the last, the color stays solid. Moving two stops closer shortens the transition, and spreading them apart makes it smoother.

When two stops share the same position, the transition disappears and you get a crisp edge, known as a hard stop. That's how you build bands and stripes with nothing but CSS:

.bands { background: linear-gradient(90deg, #008080 0% 33%, #FAF9F6 33% 66%, #FF7F50 66% 100%); }

The color start end syntax defines a solid band in a single stop. In the generator, you get the same result by placing two stops at the same position. For stripes that repeat across the whole element, switch to repeating-linear-gradient() and use pixel positions.

Why some gradients turn gray in the middle

By default, the browser blends colors channel by channel in sRGB. That works well for colors that sit close together on the color wheel, but between opposite colors the middle loses saturation. The textbook case is yellow (#FFFF00) to blue (#0000FF): the exact channel average is rgb(128, 128, 128), which is #808080, a neutral gray right in the center.

You have two fixes. The first is to add a middle stop with a vivid color you choose; the color mixer helps you find it by comparing RGB, HSL and OKLCH. The second is to ask the browser to interpolate in a perceptual space:

.banner { background: linear-gradient(in oklch, #FFFF00, #0000FF); }

In OKLCH, the hue travels around the wheel instead of cutting through the center, so the transition passes through vivid greens and cyans. Current versions of the major browsers support this syntax; if you need to serve older ones, declare a plain line without in oklch first as a fallback. Our guide to modern CSS colors covers OKLCH and the other new color functions.

Gradients over text or images: readability

A common use is the overlay: a translucent gradient over a photo so the headline has enough contrast. Since background accepts multiple layers, the first one sits on top:

.cover { background: linear-gradient(to top, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0)), url("photo.jpg") center / cover; }

The catch is that contrast changes along the gradient. Measure your text color against the lightest point of the area behind it, not the average. Run both colors through the contrast checker and make sure they reach 4.5:1 for body text, the WCAG AA minimum. The same applies to gradient-filled text (background-clip: text): every part of the letters needs enough contrast with the background, and it's wise to set a solid fallback color.

Performance and accessibility tips

• Prefer CSS over images. A coded gradient needs no extra request and stays sharp at any resolution. Save the PNG for places that can't read CSS.
• Animate with care. Changing a gradient's colors makes the browser repaint the background on every frame. For hover effects, stack two gradients and animate the opacity of a pseudo-element.
• Watch for banding. Long gradients between very similar shades can show visible steps. An extra stop or a larger difference between the end colors usually fixes it.
• Don't rely on the gradient alone. A decorative gradient shouldn't carry information that only comes through color, and text has to pass the contrast check across its full length.