CSS3 Gradient Generator

Color Swatches

Select colors to make up your gradient.

Gradient Sample

The sample updates live while you're adjust your gradient.

Gradient Direction

Select the direction for the gradient.

Color Format

Select the format you would like your colors generated in. Available options are HEX and RGB.

Your option will be remembered for the next time you visit.

The Code

The code sample updates live while you're adjusting your gradient.

              -webkit-gradient(
                linear
                left top,
                left bottom,
                color-stop(0.5, #333333),
                color-stop(0.8, #494949)
              )