Gradient Maker

This simple tool helps you create gradients in the form of data URIs.

Gradient Settings

Colors must be six-digit hex (i.e, #ff0000) or named colors (i.e., red).


Once generated, a preview of your gradient will appear below.

Data URI

The data URI to use the gradient will be output below. Copy the value and you're ready to go!


The CSS below can be used to apply the same gradient to an HTML element.