Useful Utilities

CSS Gradient Generator

Build copy-paste CSS gradients from two or three hex colours: linear at any angle, radial or conic, with vendor-prefixed fallbacks and the same colours drawn in the other shapes.

Fill in the values and calculate

Start colour*Six hex digits, with or without the #
End colour*
Middle colour (optional)A third colour to blend between the twoDefault
Middle stop positionPercent along the gradient where the middle colour sits; only used when one is givenDefault 50
Shape and directionDefault Right →

The form sends itself back to this page — results print below, computed on the server.

No results yet: fill the form above and press Calculate.

About CSS Gradient Generator

The page assembles real CSS gradient functions from two or three six-digit hex colours and the chosen shape: linear-gradient takes the angle (0deg points up and angles increase clockwise, so 90deg reads left-to-right and 180deg top-to-bottom), radial-gradient paints from a circle around the centre, and conic-gradient sweeps clockwise from the same angle setting.

With a middle colour the three stops are pinned explicitly: the ends stay at 0% and 100% and the blend point moves to the percent you choose; two-colour gradients omit the positions because the defaults are identical. The snippet also writes the old vendor-prefixed syntax (background -moz-linear-gradient(...) and friends), the solid first-colour fallback line that modern browsers use when a gradient function fails to parse, and the same colours re-drawn as the shapes you did not pick.

Colours must be six hex digits with an optional #; names like red, three-digit shorthands and transparency are rejected so the generated CSS stays predictable. Conic gradients only render in engines that support conic-gradient(); everywhere else the solid fallback colour paints instead, and no images are produced.

Questions about CSS Gradient Generator

Why does my gradient run sideways?

CSS angles start at 0deg pointing up and turn clockwise: 90deg goes to the right, 180deg points down. Pick the angle from the labels on the form, which are drawn in the direction the gradient travels.

Can I use colour names like aqua?

No. Six hex digits are required, with or without the leading #. Look the name up in any colour table and paste its six-digit code instead; the page keeps names out so every generated file is unambiguous.

What are the -moz- and -webkit- lines?

The draft-era syntax that engines before the unprefixed standard understood. Modern browsers ignore them; keeping them only matters when supporting very old engines, and the solid first-colour line beside them is the fallback modern browsers actually use.

How do I fade into the page background?

Match the end colour to the page background hex and use both on the element; gradients here work with opaque colours only, so there is no transparent stop.

Where does a conic gradient start?

The sweep begins at the from angle and runs clockwise: conic-gradient(from 45deg, ...) starts its first colour at 45deg, using the same clockwise convention as linear angles.

Bookmark and homescreen