What is a CSS gradient?

A CSS gradient is a smooth transition between two or more colours rendered by the browser as an image, set via the background property. Because it is drawn by the browser there is no image file to download, so gradients are sharp at any size and add no extra network requests.

What is the difference between linear, radial and conic gradients?

A linear gradient blends colours along a straight line at a chosen angle. A radial gradient blends outward from a centre point in a circle or ellipse. A conic gradient sweeps the colours around a centre point like a colour wheel or pie chart. This tool supports all three plus their repeating variants.

How do colour stops and percentages work?

Each colour stop has a position from 0 to 100 percent along the gradient. Two stops at the same position create a hard edge instead of a blend, which is how you make stripes. The tool lets you add as many stops as you like, distribute them evenly, or reverse the whole sequence with one click.

Can I copy the gradient as a Tailwind class?

Yes. Alongside the standard CSS the tool generates a Tailwind arbitrary-value class such as the bg-[...] form, with spaces converted to underscores so it works directly in your markup. There is also a plain CSS block and an SVG export.

How do I make a transparent or fading gradient?

Select any stop and lower its opacity slider. A stop at zero opacity becomes fully transparent, so a gradient that fades from a solid colour to transparent is ideal for image overlays and hero-section scrims. The generated CSS uses rgba values automatically when opacity is below 100 percent.

Is my work saved and is anything uploaded?

Everything runs entirely in your browser, so no colours, gradients or images are ever uploaded to a server. Gradients you save to the gallery are stored in this browser's local storage and stay on your device until you delete them.

CSS Gradient Generator (Pro)

A visual CSS gradient generator for building production-ready linear, radial and conic gradients without writing the syntax by hand. Instead of guessing colour-stop percentages and angle values in a text editor, you drag stops on a live bar, tune each colour and its opacity, and watch a full-size preview update instantly. When it looks right, copy clean CSS or a Tailwind class, or export the result as an SVG or PNG file.

It is built for front-end developers, designers and anyone styling a website who needs a hero background, a button fill, a card overlay or a decorative pattern. Multi-stop support means you are not limited to two colours: add a third, fourth or fifth stop to create rich blends, brand palettes, or rainbow colour wheels with the conic mode. Six starter presets (Sunset, Ocean, Aurora, Spotlight, Colour wheel and Stripes) give you a quick base to adapt, and a built-in gallery lets you save the gradients you like back to your browser so they are waiting for you next time.

How it works

A CSS gradient is generated by the browser from a small piece of declarative syntax, so there is no image to download and it stays crisp at any resolution. This tool turns that syntax into a direct-manipulation interface. The stop track is a horizontal bar showing the current blend; click anywhere on it to insert a new colour stop, and drag the round handles left or right to change where each colour sits. The selected-stop editor below exposes a colour picker, a hex field, a position slider and an opacity slider for whichever stop is active.

For linear gradients you pick an angle from 0 to 360 degrees (with quick buttons for the common 45-degree steps); for radial gradients you choose a circle or ellipse shape and an origin position; for conic gradients you set a start angle and centre. A repeating toggle wraps the stop sequence to make stripes and patterns. Every change regenerates three outputs at once: a plain background: CSS declaration, a Tailwind arbitrary-value class, and an <svg> document you can drop straight into markup or a design tool. Helper actions let you distribute stops evenly, reverse them, or randomise a fresh palette.

Example

Suppose you want a modern hero background that fades from deep blue to violet on a diagonal. Start from the Aurora preset, drag the middle stop to about 40 percent, set the angle to 120 degrees, and the tool produces:

background: linear-gradient(120deg, #00c6ff 0%, #0072ff 40%, #7b2ff7 100%);

Lower the last stop’s opacity to 0 percent and you instead get a colour-to-transparent overlay perfect for placing text over a photograph. Switch the type to conic with seven evenly spaced rainbow stops and you have a colour-wheel swatch for a picker or loading spinner. Each variation is one click away, and the matching CSS, Tailwind class and SVG are always ready to copy.

Everything is computed locally in your browser — no colours, gradients or exported images are ever sent to a server.