Create stunning linear, radial, and conic CSS gradients with a live preview. Manage color stops, pick from presets, and copy production-ready CSS instantly.
The CSS Gradient Generator is a visual tool for building linear, radial, and conic gradients and copying the exact CSS you need — no design skills, no sign-up, and a live preview that updates as you tweak.
A gradient is simply a smooth blend between two or more colours, and CSS handles it natively with linear-gradient(), radial-gradient(), and conic-gradient(). Hand-writing those by hand means juggling angles, percentages, and hex codes until the result looks right. This tool removes the guesswork: switch between the three gradient types, add up to eight colour stops, drag each stop to any percentage, set the angle or position, and watch the preview render instantly against a checkerboard so you can see transparency. When you are happy, copy production-ready CSS as either a tidy multiline block or a single line. A dozen built-in presets — Sunset, Ocean, Aurora, Neon, and more — give you a polished starting point, and the reverse and randomise buttons help you explore variations fast. People use it to:
background-clip: textlinear, radial, and conic gradient syntax works by exampleEverything runs locally in your browser — nothing you create is uploaded, saved to a server, or tracked. The colours and CSS you generate stay entirely on your device, so you can experiment freely and paste the result straight into your stylesheet whenever it looks right.
background value.Up to 8 stops per gradient. You always need at least 2 for a visible blend — a warning shows up if you try to delete below that. For most designs, 2–3 stops look cleanest.
Yes — copy the gradient and apply it with background: [gradient]; -webkit-background-clip: text; -webkit-text-fill-color: transparent; on any heading. Works in all modern browsers.
No. Linear, radial, and conic gradients are fully supported in every evergreen browser. The generated output is plain CSS — no -webkit- or -moz- prefixes needed.
A linear gradient blends colours along a straight line set by an angle, so the colours flow from one edge toward another. A radial gradient radiates outward from a central point in a circle or ellipse, like a glow or spotlight. A conic gradient sweeps the colours around a centre point like the hands of a clock, which is handy for pie charts, colour wheels, and angular highlights. This tool lets you switch between all three with the tabs at the top.
Click + Add Color Stop to insert another colour into the blend, up to a maximum of eight stops. Each stop has a colour and a position from 0 to 100 percent, which controls where that colour sits along the gradient. Two stops give a simple fade; three or more let you build richer, multi-colour transitions. You always need at least two stops for a visible gradient.
For linear gradients, the angle decides the direction the colours travel. 0 degrees points straight up, 90 degrees points right, 180 degrees points down, and 270 degrees points left, with values in between giving diagonal blends. You can type any value from 0 to 360 degrees in the angle field or use the quick direction arrows. Conic gradients use a "from" angle that sets where the colour sweep begins around the centre.
Linear and radial gradients work in every modern browser — Chrome, Firefox, Safari, and Edge — with no prefix required. Conic gradients are also widely supported across current versions of those browsers. The -webkit- prefix is only relevant for very old browsers or for the separate gradient-text technique, where -webkit-background-clip: text is still used. For standard backgrounds, the plain CSS this tool generates is all you need.