CSS Gradient Generator

Build linear and radial CSS gradients with a live preview.

This tool runs entirely in your browser. Your data is never uploaded, never stored, and never leaves your device.

Assembles a CSS linear or radial gradient from two to four colour stops, each with its own hex value and percentage position, and writes the finished background declaration beneath a live full-width preview.

How to use it

1Pick Linear or Radial under Gradient type; the Angle slider (0–360°) only appears for Linear.
2Set each stop's colour with its swatch and its place with the slider beside it; Add stop appends one at 50% in a random colour, and Random re-rolls every stop's colour without moving any positions.
3Copy the background: line from the dark code panel.

Example

Input: The defaults: Linear, 135°, #6366f1 at 0% and #ec4899 at 100%
Output: background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

Stops are sorted by position before the CSS is written, so dragging one past another quietly reorders the list rather than emitting stops out of sequence. Radial is hard-wired to circle — there is no ellipse or size control, and switching to it drops the angle entirely, since radial-gradient(circle, …) has no direction to take. You cannot go below two stops or above four.

What happens to your data

Nothing here is text you typed — it is a handful of numbers and hex codes held in React state and passed straight to the preview element's inline style attribute for the browser to paint. Nothing is written to localStorage, so a reload returns you to the same indigo-to-pink pair everyone else starts from.

Last updated August 2026

The header of a page is empty, or a card needs to look like something without a photograph in it, and a gradient is the cheapest way there — two colours, a direction, one line of CSS. The decision that matters is made before you touch any control, and it is not which colours you happen to like.

Work out first whether the shape you want is directional or centred. A linear gradient sweeps across the whole box along one axis, which is what sits behind a hero band, a button or a long section. A radial gradient spreads outward from a point, which reads as a light source or a focus and tends to look wrong stretched across a wide strip. In CSS the angle of a linear gradient is measured clockwise from straight up, so 0deg runs bottom to top, 90deg left to right, 180deg top to bottom — a compass bearing rather than the maths convention, and the reason a first attempt so often points the opposite way.

The format's real limit is that it is paint, not texture. A gradient interpolates in a straight line through sRGB, so two hues on opposite sides of the wheel pass through a dull grey on the way, and a broad blend on an 8-bit screen shows visible bands where a photograph would not. Neither is fixed by a better tool; both are fixed by choosing hues nearer each other, or by putting a stop in the middle to steer the path.

The common mistake follows: treating the result as a background you can drop text onto. Contrast changes across the sweep, and it is the worst point that decides, not the average.

How it works

Toolvore holds the gradient as a short list of stops — each one a hex colour and a whole-number percentage — sorts that list by position, and joins it into a single declaration beginning background:. The same string is handed to the preview block as an inline style, so what you are looking at is the browser painting the exact line you copy; there is no second renderer that could disagree with it. What it will not do is worth knowing. The swatch is the browser's own colour input, which returns six-digit hex and nothing else, so there is no alpha channel and no fade to transparent. Positions are whole percentages, so a stop cannot sit at 12.5%. There is no repeating or conic gradient, no interpolation or colour-space hint, no vendor prefixes, and no export as an image or SVG — the output is one line of CSS and nothing more. The Random button re-rolls each stop's colour inside a mid saturation and lightness band, which is why it never hands you black, white or a fully saturated colour, and why its results are usually usable but never bold.

Common use cases

Filling an empty hero band while the real artwork is still being commissioned
Giving a row of cards distinct colour identities without adding images
Testing an angle change before editing the stylesheet
Building a placeholder background for a slide or a social image
Picking a two-colour sweep for a button, badge or avatar fallback
Seeing how a brand pair reads blended rather than side by side
Replacing a background image file with CSS to drop a request

Frequently asked questions

How is the angle in a CSS linear gradient measured?＋

Clockwise from straight up. 0deg puts the first colour at the bottom and the last at the top, 90deg runs left to right, 180deg top to bottom, 270deg right to left. That is a compass bearing rather than the anticlockwise-from-east convention used in maths, which is why a first attempt so often points the opposite way to what was intended. CSS also accepts keywords — to right, to bottom, to bottom right — and for the corner keywords the browser works out the angle so the gradient line meets that corner exactly, something a fixed degree value matches only at one particular box shape.

Why does my gradient show visible bands or stripes?＋

Because a screen has only 256 levels per channel, and a blend stretched across a wide area asks for more steps than that. Where two neighbouring bands differ by a single value you get a visible edge, and the flatter the colour change the wider each band becomes. It shows up most in dark blues and greys, across full-width sections, and on cheaper panels. The usual remedies are to shorten the distance the blend has to cover, to pick endpoints further apart so each step is smaller relative to the whole, or to lay a faint noise texture over the top, which dithers the edges and breaks them up.

Why do my two colours turn grey in the middle?＋

A gradient blends by moving in a straight line between the two colours, and in sRGB that line passes close to the centre of the space — which is grey. Two hues sitting opposite each other on the wheel, blue and orange say, have their midpoint right there, so the middle goes muddy however clean the ends are. Hues that sit near each other never cross that region and stay saturated the whole way. If you want the wide contrast anyway, add a third stop in the middle holding a saturated colour that lies between them, and the blend is forced to travel round rather than through.

Can a gradient fade out to transparent?＋

In CSS yes, though the obvious way to write it usually looks wrong. Blending a colour to the keyword transparent blends it towards transparent black, so the fade picks up a dirty dark edge on its way out. The fix is to fade to your own colour at zero alpha — an rgba value, or the eight-digit hex form ending 00 — so only the opacity moves and the hue stays put. Browsers handle the plain keyword better than they once did, but the explicit version is still the safe one. The swatch here returns opaque six-digit hex, so you would add the alpha to the copied line yourself.

Is text readable on top of a gradient?＋

Judge it at the worst point rather than the average. Contrast is met or missed pixel by pixel, so white copy that sits comfortably over the dark end of a sweep can fall below the 4.5:1 ratio wanted for body text well before it reaches the pale end. Sample the lightest colour the text actually crosses and check that one. Where the range is too wide to win, put something in between: a semi-transparent dark or light layer over the gradient, a solid panel behind the text block, or a shift of the stops so the copy sits over the calmer stretch.

Why is my gradient not showing up at all?＋

Almost always because the box has no height, or the value is in the wrong property. A gradient is a background image rather than a colour, so it belongs in background or background-image; put it in background-color and nothing paints. An empty div with no content and no height is zero pixels tall, so the gradient is present and invisible. On the page body it stops where the content stops unless the element has a min-height, which is why a short page shows a strip of colour and then white. Test the box with a temporary solid colour first, then put the gradient back.

Should I use a CSS gradient or a background image?＋

CSS when the blend is simple, an image when it is not. A gradient written in CSS costs no extra request, weighs almost nothing, scales to any size without going soft, and changes by editing one line. It cannot carry grain, texture, or the soft multi-point blends people call mesh gradients — those need a raster image or an SVG. The middle ground is worth knowing: several gradients can be layered in a single background property, comma separated, with the first one painted on top, and a radial with a transparent edge sitting over a linear base gets closer to a mesh look than one blend can.

Where do the colours I pick here go?＋

Nowhere. The stops live as a few numbers and hex strings in the page's own state, and the only places they are used are the inline style on the preview block and the line of text beneath it, which the copy button hands to your clipboard. No request carries them anywhere, nothing is written to storage, and nothing is appended to the address bar — so a pairing you liked is gone once you leave, and a link to this page cannot carry a gradient to a colleague. Paste the declaration into your stylesheet, or somewhere you will find it again, before closing the tab.