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).






Preview

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!

CSS3

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