CSS Gradient Generator
CSS Gradient Generator — build linear, radial, or conic gradients with a live preview. Adjust angle, stops, position. Copy as CSS or Tailwind. Free, no signup.
About CSS Gradient Generator
The CSS Gradient Generator builds your gradient in real time and gives you the exact line of code to paste into a stylesheet, Tailwind class, or design tool. Pick a type, drag the angle slider, place colour stops, and the preview updates live. When it looks right, hit Copy CSS or Copy Tailwind.
What a CSS gradient actually is
A CSS gradient is a smooth blend between two or more colours, defined entirely in code. No image file, no network request, no resolution to worry about. The browser draws it directly using the GPU, which makes gradients fast, infinitely scalable, and trivial to edit — change one hex and the whole surface updates. That’s why gradients have replaced soft-edged background images in almost every modern interface.
The three types, explained
Linear gradients run colours along a straight axis. You set an angle (0° points up, 90° right, 180° down, 270° left) and the colours blend along that line. They’re the most common type and the right starting point for hero backgrounds, buttons, soft tonal surfaces, and anywhere you want a flat shape to feel a little less flat.
Radial gradients fan out from a focal point. Pick a shape (circle for perfectly round, ellipse to match the container’s aspect ratio) and a position (center, top right, bottom, etc.) — the first colour sits at the focal point and the rest spread outward. Radial gradients are how you build spotlight effects, soft glows behind a logo, or vignettes around the edges of an image.
Conic gradients sweep colours around a centre point, like the hands of a clock rotating through your stops. They’re the newest and most stylistic of the three — useful for pie-chart segments, circular progress dials, rainbow effects, and anywhere you need a rotating colour relationship without committing to SVG.
How colour stops shape the result
Colour stops define where each colour reaches its full strength. By default, gradients distribute stops evenly (0%, 50%, 100% for three stops), but the real art is in moving them. Push a stop toward one end and that colour dominates more of the surface — useful when you want “mostly your primary colour with a touch of accent at the edge” rather than a 50/50 split. Pin two stops close together (48% and 52%) and you get a near-hard edge — a deliberate stylised effect more than a gradient. This tool supports two to six stops; for most production designs, three is the sweet spot.
Tailwind has limited built-in gradient support — raw CSS gives you more
Tailwind ships utilities for two- and three-stop linear gradients on canonical axes (bg-gradient-to-r, from-*, via-*, to-*). They’re fast for simple cases but don’t cover radial, conic, off-axis angles, or four-plus stops. That’s why this tool gives you both: Copy CSS for the raw background: linear-gradient(...); declaration that works everywhere, and Copy Tailwind for a best-effort class — friendly utility form when it fits, arbitrary-value bg-[...] form when it doesn’t.
A note on accessibility
Beautiful gradients can be a contrast nightmare. Text that reads cleanly against one end of the gradient often vanishes against the other. If you’re putting text on top, either keep the gradient low-contrast (two close shades of one hue) or layer a translucent dark overlay between the gradient and the text. Always test the contrast against the darkest and lightest points of the gradient — middle-ground checks pass too easily and lie to you about the corners.
Free, runs in your browser, works on any device.
Frequently asked questions
A CSS gradient is a smooth, code-defined blend between two or more colours used as a background. Unlike an image (a PNG, JPG, or SVG), a gradient has no file — it's a few characters of CSS that the browser renders directly. That means zero network requests, infinite scaling without blur, instant edits when you tweak a colour, and no concerns about device pixel ratio. Gradients are also GPU-accelerated, so they animate and scroll without affecting performance. They're the modern, performant alternative to baking soft colour transitions into bitmap images.
Three shapes for three feels. **Linear** runs colours along a straight axis at the angle you choose (`linear-gradient(90deg, A, B)` blends left to right) — the workhorse for hero backgrounds, buttons, and tonal surfaces. **Radial** fans colours outward from a centre point in a circle or ellipse — great for spotlights, glows behind logos, and vignettes. **Conic** sweeps colours around a centre point like a pie chart or colour wheel — useful for circular charts, dial UI, gauges, and stylised effects without resorting to SVG.
Click **Add colour stop** below the stops list to insert another stop. This tool supports up to six stops (two minimum, six maximum), which covers nearly every design use case. Each stop has a colour and a position from 0% to 100% — type a hex into the input, drag the position field, or click the colour swatch to open the native colour picker. Stops blend smoothly between their positions, so two stops at 30% and 70% produce a sharper transition than stops pinned to 0% and 100%.
Yes — click **Copy Tailwind** and you'll get a best-effort Tailwind class on your clipboard. For two- or three-stop linear gradients on canonical angles (0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°), you get the friendly utility form: `bg-gradient-to-r from-[#4F46E5] to-[#EC4899]`. For radial, conic, off-axis angles, or four-plus stops — which Tailwind's built-in utilities don't support — you'll get an arbitrary-value class like `bg-[linear-gradient(...)]` with underscores replacing spaces, which Tailwind requires inside `[]` brackets.