Developer Tools New Tool

Free Online CSS Gradient Generator, Linear, Radial and Conic

Drag an angle, add colour stops, and read the finished background-image rule. Linear, radial and conic gradients are all here, with stop positions in per cent and a repeating option, and the preview updates on every move so you can see what the rule will actually paint.

Free Forever Nothing Uploaded Linear, radial and conic Runs in your browser

Free Online CSS Gradient Generator, Linear, Radial and Conic

Advertisement Slot (Top Banner) Google AdSense Unit • Responsive Banner

CSS Gradient Generator Everything happens in this tab. Nothing you paste is sent anywhere.

Preview

CSS

Shape Type Repeating Extent

Direction Angle 135deg Centre X Y 50% 50%

Colour stops

Paste this on background-image, not background-color.

Buy Us A Coffee

Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.

Buy Us A Coffee

Sponsored Content (Below Tool) Google AdSense Placement

How to Build a CSS Gradient

A few steps, and nothing is uploaded.

Pick the shape Linear runs along an angle, radial spreads out from a point, conic sweeps around one. Turn on Repeating to tile the same run over and over.

Set the direction Linear gets an angle in degrees, where 0 points up and 90 points right. Radial and conic get a centre position instead.

Add your colours Two stops to begin with. Add more, drag each position in per cent, and remove any you do not want. The preview follows every change.

Copy the rule The output box holds a complete background-image declaration. Copy it, or download it as a small CSS file.

What to Know About CSS Gradients

Including the reason background-color will not take one.

A gradient is an image, so it goes on background-image. background-color only takes a flat colour and will ignore linear-gradient() entirely. If you are using the background shorthand, the gradient goes in the image slot, and a shorthand that also sets a colour will overwrite any colour set earlier in the rule.

Two stops at the same position give you a hard edge. Set one stop to 50% and the next to 50% as well, and the colour changes with no blend at all. That is how stripes, progress bars and two-tone panels are made, and it is why the position sliders let two stops meet.

This page writes the rule; it does not read one back. You cannot paste an existing gradient in and have the sliders move to match it. The controls are the source of truth, and the output is generated from them, so editing an inherited gradient means rebuilding it here rather than importing it.

No vendor prefixes are added, because none are needed. Unprefixed linear-gradient() and radial-gradient() have worked in every current browser for years. conic-gradient() is newer but is also unprefixed and widely supported, so a -webkit- copy would only make the rule longer.

Key Features & Capabilities

What this tool does, and what it deliberately does not.

Three gradient types Linear, radial and conic, each with a repeating variant.

Stops you control Add, remove and position each colour stop in per cent.

Live preview The panel repaints while you drag, so no guessing at an angle.

Colour swatches Every stop is shown as a swatch in the order it is painted.

A rule you can paste A full background-image declaration, with units written in.

Runs in your browser Nothing is sent anywhere. The page works with the network off.

About the CSS Gradient Generator

A CSS gradient is drawn by the browser rather than loaded as a file, which is why it scales cleanly, costs nothing to download and can be changed by editing one line. The syntax is not hard, but it is fiddly: the angle is measured from up rather than from right, the stop positions are optional until they are not, and radial gradients take a shape and an extent keyword before the colours start.

This page puts the controls next to the result. Choose linear, radial or conic, set the angle or the centre, then add as many colour stops as the design needs and drag each one into place. The preview panel is a real element with the real rule applied to it, so what you see is what the browser will paint, not an approximation drawn on a canvas.

The output is a plain declaration. It sets background-image, because that is the property a gradient belongs to, and it includes the units so that nothing is lost when you paste it into a stylesheet. Nothing is uploaded, nothing is minified behind your back, and the rule is the same length and shape as one you would have written by hand.

Frequently Asked Questions

Angles, stops, hard stops and browser support.

Because a gradient is an image, not a colour. background-color accepts a single flat colour and silently ignores a gradient function. Put the value on background-image, or in the image slot of the background shorthand, and it will appear.

In CSS, 0deg points to the top and the angle increases clockwise, so 90deg points to the right and 180deg points down. This is not the same convention as many drawing tools, which is the usual reason a copied angle looks mirrored. The slider here uses the CSS convention, so the number in the output is the number you should keep.

Give two neighbouring stops the same position. A stop at 50% followed by another at 50% produces a hard line instead of a fade. Repeat that pattern and turn on Repeating to tile it, which is how striped backgrounds and candy-cane progress bars are built.

No. The page generates a rule from the controls; it does not parse one. If you need to change a gradient you already have, read its stops off the old rule and set them here, then take the new output. That is a real limitation rather than an oversight, and it is worth knowing before you start.

Not for linear or radial gradients, which have been unprefixed everywhere for a long time. Conic gradients are newer but are also unprefixed and supported in all current browsers, so the output here has no prefixes at all. If you must support a very old browser, set a flat background colour first as a fallback, and the gradient will simply override it where it is understood.