PixelDock

Gradient generator

Blend colors with editable color stops.

Live preview

Preview styling and sample content are not included in your CSS.

CSS output

How to use Gradient

Build a linear or radial gradient with two to six color stops. Stop positions are percentages; the generated stops are sorted by position.

The generated selector is an example. Rename it to match your markup. Shapes, shadows, gradients and rounded corners need an element with dimensions or content.