Design linear and radial CSS gradients with up to five colours and copy the code.
A linear gradient blends along a straight line. The angle sets the direction: 0deg runs bottom to top, 90deg left to right and 180deg top to bottom. A radial gradient spreads out in a circle from a point, here the centre, an edge or a top corner, which works well for spotlight and glow effects.
Each colour stop has a position from 0% to 100%. Stops close together make a sharp change; stops far apart make a soft blend. Stops are listed in order of position in the code, so the preview and the copied CSS always match.
The output is a single background declaration such as background: linear-gradient(135deg, #2563eb 0%, #f43f5e 100%); and works in all current browsers without prefixes. Put it on any element with a size: a div, a button or the body. For gradient text, add background-clip: text and a transparent text colour yourself.
This tool allows up to five stops. CSS itself has no fixed limit.
No. Plain linear-gradient and radial-gradient work in every browser in current use.
The element probably has no height. Give it content, a height or padding.
Yes. Put two stops at the same position, such as 50% and 50%, with different colours.
OneClickly is a set of 119 free tools for PDFs, images, text, everyday math and code. They run in your browser, so the files and text you work with stay on your device.