Two colors and a direction cover a hero banner. A progress ring, a pie-shaped badge, or a striped awning background needs conic and repeating functions, several stops, and sometimes a stop that fades to nothing. This page keeps all six gradient functions on one screen and treats the ramp as the main control.
The ramp is the interface
Every stop lives as a pin on the horizontal track under the preview. Drag one and the number follows the pointer. Click empty track and a new stop appears at the click position, colored by blending the two stops on either side, so an inserted midpoint starts out invisible and shifts only when you change it. Selecting a pin opens the inspector below with hex, position, and opacity for that single stop.
Stop order on screen never matters. The generator sorts by position before it writes the rule, so dragging a pin past its neighbor reorders the gradient without breaking anything.
Six functions, one stop list
Switch between linear-gradient, radial-gradient, conic-gradient, and the three repeating variants without losing your colors. The controls under the type rail swap with the choice:
- Linear and repeating linear show the angle dial only.
- Radial and repeating radial show the origin pad plus shape and reach.
- Conic and repeating conic show the dial for the start angle and the pad for the sweep center.
Repeating functions restart the stop sequence once the last stop is reached. Set your final stop below 100 percent to see it work. A repeating gradient whose last stop sits at 100 percent has nothing left to repeat and renders the same as the plain version.
Conic angles trip people up
A conic gradient sweeps around a center point rather than running along a line. The from value marks where the sweep starts, using the same convention as linear angles: zero points at the top of the box, and the value grows clockwise.
| Value | Sweep begins | Typical use |
|---|---|---|
from 0deg | Twelve o'clock | Progress rings and donut charts |
from 90deg | Three o'clock | Sweeps aligned to a right-hand edge |
from 180deg | Six o'clock | Fan shapes anchored at the bottom |
from -45deg | Ten thirty | Angled sheen on a card or button |
Hard color changes matter more in conic mode than anywhere else. Two stops sharing the same position produce a clean edge instead of a blend, which is how pie slices and pointer dials get built. Drag two pins onto the same percent and the seam appears immediately in the preview.
Transparency, and what survives export
Each stop carries its own opacity. Drop a stop below 100 percent and the rule switches that stop from hex to rgba(), while stops at full opacity keep their shorter hex form. The preview sits on a checkerboard so a fade to nothing reads as transparent rather than white.
One detail worth knowing: fading to transparent in older browsers meant fading through transparent black, which greyed the midpoint. Writing the same color with zero alpha, which is what this tool does, keeps the fade clean. If a gradient looks muddy halfway through in an old build target, that is the reason.
Transparency reaches the PNG file, since PNG carries an alpha channel. It reaches SVG too. It does not reach a JPEG conversion later in your pipeline, where anything transparent flattens onto whatever background the converter picks.
Banding, and two fixes
Long gradients across a wide element sometimes show visible steps rather than a smooth ramp. Eight-bit color has 256 levels per channel, and a 1600 pixel wide fade between two close colors asks for more levels than exist.
- Add intermediate stops. Three or four stops along the same path give the renderer more anchors and shorten each ramp segment.
- Overlay noise. A tiling PNG at very low opacity above the gradient hides the steps. This is standard practice on large hero sections.
Banding shows worse on dark gradients and on cheap panels. Check on a phone before deciding the CSS is fine.
Where this page stops
- No color interpolation hints. The midpoint syntax, a bare percentage between two stops, is not written here. Add it by hand if a fade needs to bias toward one side.
- No modern color spaces. Output stays in sRGB hex and
rgba(). Gradients interpolated inoklchorlabavoid the grey midpoint between complementary hues, and that syntax needs writing manually. - SVG has no conic equivalent. The SVG tab covers linear and radial only. A conic sweep in SVG needs stacked paths or a foreignObject, neither of which belongs in a copy button.
- PNG export approximates. Canvas draws linear, radial, and conic gradients natively. Repeating variants are tiled across four cycles, and radial reach keywords collapse to a single circle radius. The CSS rule stays exact, the raster preview does not.
- Two stops minimum. Delete is refused at two, since a one-stop gradient is a flat fill.
Everything runs in your browser. Nothing about your colors leaves the tab.
Pick a different tool when
You need a plain two-color background rule and nothing else. The CSS Gradient Generator keeps linear and radial on a smaller screen with a ready HTML snippet. You want a set of related flat colors rather than a blend, in which case the Palette Generator or the Harmony Generator fits better. You are building tints of a single brand color for a design system, which is the job of the Tint and Shades Generator.
