🌈 CSS Gradient Generator

Visually edit linear, radial and conic gradients. Add or remove color stops freely and copy the CSS code.

100% Free No signup Browser-only 5 languages Dark mode

🔒 About Privacy

・All processing runs in your browser
・Your input data is never sent to any server
・No storage logs, no history, no database
・No signup, no login, no payment ever

Type

Angle (90deg)

Color Stops

Presets

CSS

📖 Where people get stuck

Edit linear, radial and conic gradients visually and copy out CSS you can paste as is. What comes out is the default sRGB interpolation, where the browser joins two colours by stepping the red, green and blue channels evenly. That is not how the eye reads a colour ramp — muddy midpoints and visible banding both trace back to this single fact.

Case	What happens	What to do
A grey band appears in the middle	Joining two colours that sit opposite each other on the wheel, such as blue and yellow, drains the saturation in the middle. Linear sRGB interpolation puts the midpoint of `rgb(0 0 255)` and `rgb(255 255 0)` at `rgb(128 128 128)` — exactly grey. It also explains why a design tool and the browser disagree: Figma and Illustrator may be interpolating in a different colour space.	The most reliable fix is to add one colour stop in the middle; for blue to yellow, a green or cyan in the centre traces the wheel and looks natural. Where you can rely on support, naming the interpolation space is the proper answer — `linear-gradient(in oklch 90deg, blue, yellow)`, since `oklab` and `oklch` keep lightness perceptually even and never go muddy. Be aware that Safari below 16.2 and older Android WebViews drop the whole declaration, leaving no background at all, so write the sRGB version first and override it.
Banding shows up when the gradient covers a large area	Each channel has 256 steps, 0 to 255. Spread a low-contrast gradient across a 1920px viewport and each step is a 7 to 8 pixel band, wide enough for the joins to read as lines. It is worst in dark colours: the eye is most sensitive to differences down there, while sRGB encoding allots the fewest steps to exactly that range. Hero backgrounds and modal overlays are where it usually bites.	Overlaying very faint noise is the standard cure: put a 100 to 200 pixel transparent PNG at 2 to 4 percent opacity on top, as in `background-image: url(noise.png), linear-gradient(...)`, and the step edges scatter until they are invisible. Embedding an SVG `feTurbulence` as a data URI avoids adding an image request. The other lever is to shorten the run — capping the gradient at about 300px tall instead of full-bleed removes most of it. Adding more colour stops does not help, since the problem is the number of steps available.
The look changes when the element is resized	The default for `radial-gradient` is `ellipse farthest-corner`: it is rescaled every time so that it stretches to the aspect ratio of the box and ends its last colour at the furthest corner. What was a clean circle on a card becomes a flat ellipse in a wide hero and a tall one on mobile. `conic-gradient` behaves the same way — a pie chart in a non-square box comes out oval. Colour stops given in `%` have the same issue, because the percentage is measured against the element.	To keep it circular, say `radial-gradient(circle at center, …)` explicitly. The ending shape can also be `closest-side`, `farthest-side` or `closest-corner`; when you do not want it tied to the element width at all, an absolute size like `circle 200px at center` is the most predictable. For a pie chart with `conic-gradient`, pair it with `aspect-ratio: 1`. Always verify by actually dragging the browser width — a fixed-width preview will never reveal this class of breakage.

A gradient is a background-image, not a background-color. Writing the shorthand background: linear-gradient(...) resets any background-color to transparent, taking your fallback colour with it, so declare background-color on its own line first. Second, never fade to the keyword transparent: in sRGB it means rgba(0,0,0,0), which is transparent black, so white to transparent passes through grey on the way. Fade the same colour down to zero alpha instead, as in rgb(255 255 255 / 0). Finally, browsers omit background images when printing by default — a heading in white text on a gradient prints as white text on white paper and vanishes.

📖 How to Use

1

Choose a type

Pick linear, radial or conic. The angle and shape inputs change accordingly.
2

Edit color stops

Pick colors and adjust positions. Add or remove stops as needed.
3

Copy the CSS

Copy the generated CSS to clipboard and paste it into your background property.

❓ Frequently Asked Questions

Is my data sent to your server?

No. Everything runs in your browser. You can verify in the Network tab.

What is the browser support?

linear and radial work in all modern browsers. conic-gradient is supported in Chrome 69+, Firefox 83+, Safari 12.1+.

How many color stops can I add?

There is no hard limit. In practice, 2 to 10 stops is common.

🔗 Related Tools

🐛 Found a bug or issue with this tool?

Free to use, no signup. Even just the steps to reproduce are helpful. Reports go directly to the operator and help us fix issues.