Question 1

Is this CSS gradient generator free?

Accepted Answer

Yes, completely. Every feature on this page is free, including radial and conic gradients, unlimited color stops, the perceptual-smoothing toggle, image sampling, and every output mode (Tailwind, text, border, animated). There's no sign-up, no watermark, and nothing held back behind a "Pro" tier or an ad.

Question 2

Do I need to download or install anything?

Accepted Answer

No. Everything runs in this browser tab. Build your gradient, sample colors from an image, or use "Pick from screen," and there's nothing to install and nothing left behind when you close the page.

Question 3

Does this tool upload my colors or images anywhere?

Accepted Answer

No. Every stop you set, every color you sample, and any image you upload is processed entirely in your browser. This tool doesn't even have a server to upload to, so there's nothing for your gradient or image data to be sent to in the first place.

Question 4

Can I create a gradient with more than 2 colors?

Accepted Answer

Yes. Add as many color stops as you want with the "Add stop" button or by clicking anywhere on the stop bar. Three, five, a dozen: the preview and the CSS output keep up with every stop you add.

Question 5

Can I make a transparent or semi-transparent gradient?

Accepted Answer

Yes. Every color stop has its own opacity control, from fully opaque to fully transparent, so you can fade a gradient into the background behind it or blend multiple gradient layers.

Question 6

What's the difference between a linear, radial, and conic gradient?

Accepted Answer

A linear gradient moves color along a straight line at whatever angle you set. A radial gradient spreads color outward from a center point in circles. A conic gradient sweeps color around a center point like a clock hand, which is what makes it useful for pie-chart and color-wheel effects. Switch between all three with the type selector above. This tool is one of the few that supports all three, rather than stopping at linear and radial.

Question 7

Can I make a repeating gradient?

Accepted Answer

Yes. Toggle "Repeating" for a linear or radial gradient (conic gradients are naturally repeating by shape, so the toggle doesn't apply there) and your stop pattern tiles continuously instead of stretching once across the element. Set your stops well short of 100% to see a tight, visible repeat.

Question 8

Why does my gradient look gray or muddy in the middle?

Accepted Answer

That's a real, well-known quirk of how gradients are usually interpolated: mixing two very different hues (like red and green) in plain RGB or HSL often passes through a dull gray or brown "dead zone" partway through. Turn on "Avoid muddy middle colors" and this tool interpolates through OKLCH, a perceptually uniform color space, instead. That's the same fix professional design tools use, simplified here to a single toggle.

Question 9

Can I pick a gradient color directly from my screen?

Accepted Answer

Yes. Open a stop's color popover and click "Pick from screen." Your cursor turns into an eyedropper you can move over any pixel on your entire screen, not just this browser tab, using the browser's native EyeDropper API.

Question 10

Why can't I use the eyedropper in Firefox or Safari?

Accepted Answer

That's a real limitation of those browsers today, not something left out here: the EyeDropper API is currently only implemented in Chrome, Edge, and other Chromium-based browsers. In Firefox or Safari, the button is hidden rather than shown as a dead control. Sample from an uploaded image or type the color in manually instead.

Question 11

Can I build a gradient from an image?

Accepted Answer

Yes. Drop an image below, click to browse, or paste one straight from your clipboard, and this tool extracts its dominant colors automatically and turns them into gradient stops. It happens entirely in your browser, ready to fine-tune from there.

Question 12

Can I use this gradient as a Tailwind CSS class?

Accepted Answer

Yes. Switch the code panel to the "Tailwind CSS" tab and copy the ready-made arbitrary-value class, like bg-[linear-gradient(...)]. It works for any gradient this tool can build, including conic and multi-stop gradients Tailwind's own built-in from-*/via-*/to-* utilities can't express.

Question 13

How do I make gradient text in CSS?

Accepted Answer

Switch the code panel to the "Gradient text" tab and copy the snippet. It clips the gradient to your text's shape using background-clip: text and makes the text itself transparent so the gradient shows through. Paste it onto any heading or text element.

Question 14

How do I make a gradient border in CSS?

Accepted Answer

Switch the code panel to the "Gradient border" tab. It uses a two-layer background trick (a solid inner layer plus your gradient as the outer layer) since CSS borders can't take a gradient directly, and it supports rounded corners, unlike the simpler border-image approach.

Question 15

Can I animate a CSS gradient?

Accepted Answer

Yes. Switch the code panel to the "Animated" tab for ready-made properties plus a @keyframes animation that shifts the gradient smoothly back and forth. Paste the declarations onto your element's selector and the keyframes block anywhere else in your stylesheet.

Question 16

Will this gradient work in every browser?

Accepted Answer

The core gradient, linear, radial, conic, repeating, multi-stop, alpha, works in every modern browser. The one exception is the "Avoid muddy middle colors" toggle's OKLCH interpolation, which needs a browser from 2023 or newer (every evergreen browser today); turn it off and the gradient still renders correctly everywhere, just interpolated in plain RGB instead.

CSS Gradient Generator

Color stops

CSS code

Preset gradients

Build a gradient from an image

Frequently asked questions

Related tools