About the css gradient generator
A CSS gradient is a background image, not a colour, so it goes in `background` or `background-image` and cannot be used anywhere a plain colour is expected - `border-color`, for instance.
Stop positions are where each colour reaches full strength. Moving them closer together makes the transition sharper; setting them to the same value produces a hard edge, which is how two-tone backgrounds are made.
Frequently asked questions
- Is anything I enter sent to a server?
- No. Every calculation runs inside your browser, and nothing you type or pick is uploaded, stored or logged. The page keeps working with the network disconnected.
- Which way does the angle point?
- CSS angles run clockwise from up. 0deg goes bottom to top, 90deg left to right, 180deg top to bottom. This is different from the mathematical convention, and is the usual reason a gradient comes out mirrored.
- Can I use this for text?
- Yes, with `background-clip: text` and a transparent text colour, but check the contrast afterwards - gradient text is often unreadable at one end even when it looks fine at the other.
- Do I need vendor prefixes?
- No. Unprefixed linear and radial gradients have been supported by every browser in use for over a decade.
Related web tools
How your data is handled
Everything happens on your device. There is no upload, no storage and no logging. Closing the tab clears everything you entered.