Gradient Generator

Build a linear or radial CSS gradient with live preview.

Calculated locally in your browser.

Overview

Builds a linear or radial CSS gradient visually, with live preview and copyable CSS.

How to use it

1Choose linear or radial.
2Pick two colors and (for linear) an angle.
3Copy the generated CSS.

Related tools

All design tools

Color PickerPick a color from anywhere on your screen, or enter one manually.Shadow GeneratorBuild a CSS box-shadow with live preview.Contrast CheckerCheck WCAG contrast ratio between two colors.Border Radius GeneratorBuild a CSS border-radius, with independent corners.