How to Create a CSS Gradient

The tool builds a standard CSS gradient value and wraps it in a ready-to-paste declaration. With Linear selected you get a snippet like `background: linear-gradient(90deg, #ff7a18 0%, #1d2330 100%);` — the angle in degrees, then each color with its position. Switch to Radial and the output becomes `background: radial-gradient(circle, #ff7a18 0%, #1d2330 100%);`, fanning the colors out from the center instead of along a line.

Because the snippet is plain, valid CSS, you can drop it onto a `<div>`, a button, a section background, or a card without any framework-specific tweaks. It works the same in vanilla CSS, Sass, Tailwind's arbitrary-value syntax, or styled-components.

The angle is the single number people most often get wrong. In CSS, the angle describes the direction the gradient travels toward, measured clockwise from pointing straight up. So 0deg fades from bottom to top, 90deg fades from left to right, 180deg fades from top to bottom, and 270deg fades right to left. Diagonal values like 45deg run from bottom-left to top-right.

The generator accepts 0 to 360 and previews the result instantly, so the fastest way to get the angle you want is to nudge the number and watch the preview rather than do the geometry in your head. Radial gradients ignore the angle entirely, which is why the field greys out when you pick that type.

Generating a gradient is pure math on a few short strings, so there's no reason to send anything to a server — and Tooldrop doesn't. The whole tool runs on-device in your browser. Your color choices never get uploaded, there's nothing to log in to, and there are no usage limits, so you can generate as many gradients as a project needs.

That same model applies across Tooldrop's other developer tools, from a JWT decoder at /dev/jwt-decoder to image converters like /image/png-to-jpg — free, no account, and most processing happening locally so your files and data stay with you.