Color and design

CSS Gradient Generator

Build linear or radial CSS gradients with two or three color stops and copy the background declaration.

Build gradient

Color stops must run from lower to higher percentages. Equal positions create a hard edge. Effects appear only in the result preview.

Your inputs and results are processed in your browser and are not uploaded to ToolPixels. This tool does not save them.

CSS gradient direction and stops

A linear angle of 0 degrees points upward and 90 degrees points right. Radial gradients expand from the selected center. Color stops may include HEX alpha.

Copy the background declaration into a CSS rule. Transparent stops are previewed over white. This generator does not check text contrast across the gradient.