CSS Gradient Pattern Maker?

CSS Gradients can make a huge variety of different patterns, which can be used as light weight visual decoration in any web page or application. As gradients can be tiresome to code and amend, I made this pure CSS Gradient Pattern Maker, which allows the creation of patterns with easy sliders and inputs in order to generate a preview as well as the CSS code. It is recommended to prefix the code as needed, using -webkit which is applicable to this type of gradient. A solid background color should also be specified as a fallback for older browsers.

Gradient Settings

Gradient Type

Gradient Shape (width and height will need to be different)

Background Size

Background Width


Background Height



Change the settings above in order to generate pure CSS gradient backgrounds.