CSS Gradient Generator: Linear, Radial & Conic

Three gradient types, three different jobs

A CSS gradient is an image the browser draws for you, so it goes anywhere an image goes: background, border-image, mask. There are three kinds. linear-gradient blends along a straight line at an angle. radial-gradient blends outward from a point as a circle or an ellipse. conic-gradient sweeps colors around a center point like the hands of a clock.

Use linear for hero backgrounds and buttons. Radial is for spotlights, vignettes and soft glows behind content. Conic is for pie charts, color wheels and loading rings, all without a single image file or line of JavaScript.

Angles and positions, explained once

Linear angles follow the compass, not math class. 0deg points up, 90deg points right, 180deg points down. So linear-gradient(90deg, red, blue) runs red on the left to blue on the right. The keyword forms mean the same thing: to right is 90deg, to bottom right aims at the corner whatever the box size.

For conic gradients the angle is the starting point of the sweep: from 0deg starts at twelve o'clock and goes clockwise. For radial and conic, the position (at center, at top left) moves the origin. A radial gradient at top left makes light that falls from a corner, which reads more natural than a dead-center blob.

Color stops, and the hard-stop trick

Each stop is a color and a position. Positions are percentages along the gradient line. Leave them evenly spread and you get a smooth blend. Push two stops together and the blend in between gets short and punchy.

Put two stops at the exact same position and there is no blend at all, just a hard edge. That is how you draw stripes, flags and progress bars in pure CSS. The Stripes preset uses stops at 0%, 10%, 10% and 20% with repeating-linear-gradient, which tiles that 20% pattern across the whole box. Adjust the angle to tilt it.

Stops do not have to be in order in the editor. The output sorts them by position, so you can drag freely without breaking the CSS.

A worked example

Say you want a dark hero section with a teal glow in the top-left. Pick Radial, shape Circle, position top left. Set three stops: teal at 0%, a deep navy at 45%, near-black at 100%. The output is radial-gradient(circle at top left, #14b8a6 0%, #0b1d3a 45%, #030712 100%). Drop it on the section's background and put white text on top. Check contrast against the darkest area the text sits on, not the glow.

The generated CSS starts with a solid background line using your first color. Browsers that cannot parse the gradient keep the solid color instead of showing nothing. Every current browser supports all three gradient types, so the fallback is mostly insurance for email clients and odd embedded webviews.

Pitfalls designers hit

Muddy middles. Blending two saturated complementary colors, say orange to blue, passes through gray in the middle, because the browser interpolates in sRGB by default. Add a third stop with a bright in-between hue, or in modern browsers write linear-gradient(in oklch, ...) to interpolate in a perceptual color space.

Banding. Long, subtle gradients across a big dark area can show visible steps on 8-bit screens. Adding a faint noise texture on top, or using slightly more contrast between stops, hides it.

Transparent is not white. A stop of transparent is transparent black, and older engines fade through gray toward it. Use the same color at zero alpha instead, like rgba(20, 184, 166, 0) instead of transparent, to fade cleanly.

Text on gradients. Contrast changes across the box. Test the lightest part behind your text with the color contrast checker, and add a semi-transparent overlay if one end fails.

Why generate it here

It is plain CSS output. No library, no tracking, no account. The preview is the real browser engine drawing the exact string you copy, so what you see is what ships.