Is the CSS gradient generator free?
Yes. It is completely free to use, with no signup, no account, and no paywall.
Can I use the generated CSS in commercial projects?
Yes. The CSS you copy from the tool is yours to use in any project, personal or commercial, with no attribution needed.
Does it stay local?
Yes. Everything runs in your browser, and nothing you configure is uploaded to a server.
Why does the middle of my gradient look grey and muddy?
Because the browser interpolates between the two colours in sRGB, channel by channel, and the straight line between two saturated hues in that space passes through a desaturated region. Blue to yellow is the worst offender: the midpoint is grey rather than green. There are two fixes. Add an intermediate colour stop that keeps the saturation up, or tell the browser to interpolate in a perceptual space with linear-gradient(in oklch, blue, yellow), which keeps the chroma high all the way across.
My gradient points the wrong way. How do angles work?
CSS gradient angles are measured clockwise from straight up, and they describe the direction the gradient travels toward. So 0deg goes from bottom to top, 90deg goes from left to right, 180deg goes from top to bottom, and 270deg goes right to left. This is neither the mathematical convention nor the compass convention, which is exactly why it catches people out. If yours is mirrored, add or subtract 180.
Can I animate a gradient?
Not by transitioning the background property, which browsers cannot interpolate smoothly and which forces a repaint of the whole element on every frame. The standard approach is to stack two elements or pseudo-elements, each with a different gradient, and animate the opacity of the top one, since opacity is compositor-driven and does not repaint. Alternatively, animate a background-position on an oversized gradient, which is cheaper than repainting but still not free.
How do I put a gradient on text?
Set the gradient as the background, then apply background-clip: text along with the webkit-prefixed version, and set color: transparent so the background shows through the glyphs. The critical detail is the fallback: declare a solid colour first, so that if background-clip: text does not take effect the text is still visible. Skip it and the text renders as transparent-on-transparent, which is invisible rather than merely unstyled.
Is the gradient generated in my browser?
Yes. The preview is a real CSS background applied to a live element, and the code you copy is the exact declaration producing it. Nothing is rendered on a server and nothing you configure is transmitted.