Write a CSS gradient without memorizing the syntax

The job

You need a two- or three-stop gradient for a banner, button, or chart background. The values are simple but the punctuation is fiddly — wrong comma placement and the whole declaration is ignored silently.

Worked example

Two stops at #336699 (0%) and #d4a017 (100%), linear at 135°, produces background: linear-gradient(135deg, #336699 0%, #d4a017 100%); — copy it straight into your stylesheet. Add a middle stop at 50% for a banded transition.

Angles map to directions the way CSS expects: 0deg points up, 90deg points right, 180deg points down. Radial gradients ignore the angle field.

Limits

Hex colors only — if your design tokens use rgb() or oklch(), convert them with the color converter first. Stop positions are percentages; the tool sorts stops by position, so the input order does not matter. For text on a gradient, check readability with the contrast checker against the lightest and darkest stop.