CSS Gradient Generator

Frequently asked questions

Is my work uploaded anywhere?

No. The preview is a plain CSS background rendered by the browser — there's no canvas, no server, no third-party API. Your gradient state lives in localStorage on your device so the page picks up where you left off.

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

Linear runs colors along a straight axis you set with an angle. Radial radiates outward from a point (the position) in a circle or ellipse. Conic sweeps around a point like the colors on a color wheel — handy for donut charts, progress rings, and decorative effects.

How do color stops work?

Each stop is a color anchored at a percentage of the gradient's length (0 to 100). Between two stops, the colors interpolate. Add more stops to control transitions — a third stop in the middle, for instance, makes the gradient bend through that color rather than going straight from start to end.

Does the generated CSS work in every browser?

linear-gradient and radial-gradient have been supported in every browser for years. conic-gradient is supported in Chrome, Edge, Firefox, and Safari since 2021. For Internet Explorer support, use a fallback solid color above the gradient declaration.

Can I copy just the value, without the `background:` prefix?

The CSS textarea outputs both forms (one with the `background:` prefix, one with `background-image:`). Select the part you want and copy — both work. If you only want the gradient function itself, copy from the opening keyword (linear-gradient, etc.) to the closing parenthesis.

Why does my conic gradient look pixelated?

Conic gradients are rendered as bitmaps in some browsers, so very large gradients at small angles can show banding. Adding more intermediate stops or using a smaller container usually smooths it. The CSS itself is fine — the rendering is the limitation.

Try next