CSS Gradient Generator

How CSS Gradient Generator works

Design a gradient with two or three colours, adjust the angle and copy the CSS. Everything happens inside this page: the tool reads your input, runs the calculation or conversion locally, and hands the result back to you. Nothing is transmitted, because there is no backend to transmit it to.

That design choice is deliberate. Most free tool sites upload your files to a server, process them there, and quietly keep a copy. Toolcin cannot do that — the site is a set of static files. If your connection dropped the moment the page finished loading, every tool would still work.

Three gradient types

Linear gradients run along an angle you choose, from 0 to 360 degrees. Radial gradients spread from the centre outward. Conic gradients sweep around the centre like a colour wheel, which is how pie-chart-like and metallic effects are made.

Three colour stops are offered, so you can build a two-colour fade or a three-stop blend without editing the CSS by hand. The preview updates as you move a slider, and the generated declaration can be copied straight into a stylesheet.

Angles and where 0 points

In CSS, 0deg points up and angles increase clockwise. That is not the same as the mathematical convention where 0 points right, which is why a gradient that looks rotated is usually an angle copied from an image editor.

135deg runs from top-left to bottom-right — the diagonal most brand gradients use, because it fills a rectangle without an obvious seam.

Print and accessibility

Gradients are rasterised by the browser at the device's resolution, so they stay sharp. They also do not print reliably in some browsers unless background graphics are enabled, which is why a solid fallback colour is worth keeping in the rule.

Text over a gradient needs a contrast check at both ends of the fade, not just the middle — the worst-case end is what decides whether the text is readable.

Good to know

• Works offline once loaded, including on flights and in locked-down networks.
• No file size limit beyond your device's own memory.
• Free to use, with no account and no usage counter.
• Results are produced locally, so they are not logged or shared with anyone.

Questions