CSS Gradient Generator

CSS gradient generator

This tool builds linear and radial CSS gradients visually and hands you the exact background value to paste into your stylesheet. It is for front-end developers and designers who want a precise gradient without hand-writing the syntax or guessing at angles. Reach for it when styling buttons, hero sections, cards or text fills.

How it works

The generator assembles a standard CSS gradient string from your inputs. Each colour stop becomes a colour position% pair, and the pairs are joined with commas. For a linear gradient it produces linear-gradient(<angle>deg, stop1 pos1%, stop2 pos2%, …), where the angle (0–360°) sets the blend direction. For a radial gradient it produces radial-gradient(circle, stop1 pos1%, …), blending outward from the centre. Positions are rounded to whole percentages, and the live preview applies the same string to a box, so what you see is exactly what you copy.

Example

With type linear, angle 90°, and two stops — #3b82f6 at 0% and #9333ea at 100% — the tool outputs:

background: linear-gradient(90deg, #3b82f6 0%, #9333ea 100%);

This blends blue on the left into purple on the right. Switch to radial and the same stops become radial-gradient(circle, #3b82f6 0%, #9333ea 100%), with blue at the centre fading to purple at the edges.

Everything runs locally in your browser — your colours and code never leave your device.