CSS Gradient Generator

What is a CSS gradient?

A CSS gradient is a smooth transition between two or more colors, rendered by the browser as an <image> value. Because gradients are generated in CSS rather than loaded as files, they add zero network requests, scale to any size without blurring, and can be animated or themed with custom properties. You apply a gradient anywhere an image is allowed — most often as background-image, but also on border-image, mask-image, and (with a clip trick) on text.

There are three gradient functions — linear-gradient(), radial-gradient(), and conic-gradient() — and each has a repeating- variant that tiles the color pattern. All three share the same color-stop syntax: a comma-separated list of colors, each with an optional position. This generator writes that syntax for you while you drag stops and tweak the geometry visually.

Designers reach for gradients across the whole interface: hero and section backgrounds, buttons and badges, card surfaces, borders, and eye-catching gradient text. This free CSS gradient maker covers all of them — pick a type, set your colors, and it outputs production-ready code in CSS, Tailwind, or HTML.

How to use this generator

Start with a preset swatch or hit Random to get a working gradient instantly. In the Type tab, choose linear, radial, or conic and set the geometry — drag the angle dial (or pick a quick direction) for linear, choose shape, size, and position for radial, or set the start angle and position for conic. Switch to the Colors tab to edit the selected stop's color, opacity, and position. The fastest way to work is the gradient bar under the preview: click it to add a stop, drag a handle to move it, and double-click a handle to delete it. When it looks right, pick CSS, Tailwind, or HTML and copy — use the hex / rgb / hsl toggle to match your codebase's color style.

Linear, radial, and conic gradients explained

• linear-gradient() — Colors progress along a straight line. Set the line's direction with an angle (0deg points up, increasing clockwise) or a keyword (to right, to bottom left). This is the workhorse for backgrounds, buttons, and section dividers.
• radial-gradient() — Colors radiate outward from a center point. Control the shape (circle or ellipse), the size (how far the final stop reaches — closest-side through farthest-corner), and the center position. Ideal for spotlights, glows, and vignettes.
• conic-gradient() — Colors rotate around a center point like a clock sweep. Set the start angle with from and the pivot with at. With hard stops it draws pie and donut charts; with a full spectrum it becomes a color wheel; faded, it makes convincing angular highlights.

Color stops, positions, and opacity

Each color stop is a color plus an optional position — a percentage along the gradient line (or a degree for conic). If you omit positions, the browser spaces stops evenly; the first sits at 0% and the last at 100%. Two tricks unlock most real-world designs: place two stops at the same position to create a hard edge instead of a blend (perfect for stripes and pie slices), and lower a stop's opacity so it is emitted as rgba()/hsla() to fade to transparent — the standard way to darken the bottom of a hero image for legible text. When fading to nothing, prefer an explicit rgba(r, g, b, 0) of the same color over the bare transparent keyword to avoid a grey tint in Safari.

Using gradients in Tailwind & browser support

Tailwind's built-in bg-gradient-to-* utilities with from-, via-, and to- cover simple two- or three-color linear gradients. For anything beyond that — custom angles, conic gradients, exact stop positions, or per-stop opacity — drop the full function into an arbitrary value: bg-[linear-gradient(90deg,#6366f1_0%,#ec4899_100%)], writing spaces as underscores. The Tailwind tab above generates that class for you. As for support: linear and radial gradients work in every modern browser unprefixed and have for years; conic gradients reached cross-browser baseline in 2021, so they're safe today — add a solid background-color fallback only if you must support very old browsers.

Building the page around your gradient? Pair this tool with our CSS Flexbox Generator for aligning components and the CSS Grid Generator for full page layouts — both export ready-to-paste CSS the same way. Want a patterned or mesh-gradient backdrop instead of a flat gradient? The Background Generator makes grid backgrounds, CSS patterns and mesh gradients.