How to generate a CSS gradient

Create a linear gradient

A linear gradient moves along a straight line. The first argument sets its angle or named direction, followed by the color stops:

In CSS, 0 degrees points upward and 90 degrees points right. A stop at 0% sits at the beginning of the gradient line; a stop at 100% sits at the end. Omitting positions lets the browser distribute stops automatically.

Create a radial gradient

A radial gradient expands from a centre point. You can choose a circle or ellipse and move the centre to a useful position:

A circle uses the same radius in each direction. An ellipse follows the proportions of its box. Positioning the centre at top left, for example, makes the color spread outward from that corner.

Control color stops

Stops define both the color and where it appears. For a three-color gradient, keep positions in ascending order:

Move the middle stop toward 0% to make the first transition shorter. Give adjacent colors the same position to create a hard edge instead of a blend. HEX colors can include alpha digits, but transparency reveals whatever is behind the gradient, so test it on the real background.

Use gradients carefully

• Keep text readable across every part of the background, not only at one sampled point.
• A contrast checker evaluates a single color pair, so it cannot certify text placed across a changing gradient.
• Prefer a solid fallback when printing or older rendering environments matter.
• Use the generated function as a value for background or background-image.
• Test large screens and narrow mobile layouts because the gradient line changes with box dimensions.

Generate CSS with ToolPixels

The free CSS Gradient Generator builds linear or radial gradients with two or three stops. Choose an angle or radial centre, set stop positions, review the preview, and copy the background declaration.

Generate a CSS gradient