CSS Gradient Demo

Note: vendor prefixes are necessary in webkit and older versions of other browsers, though they aren't shown below.

Gradient 1

linear-gradient(left, red, maroon);

Gradient 2

linear-gradient(120deg, green, yellow);

Gradient 3

radial-gradient(top left, tan 125px, brown 450px);

Gradient 4

radial-gradient(circle, yellow, orange 125px, red);

Gradient 5

repeating-linear-gradient(30deg, red, brown 10px, yellow 25px);

Gradient 6

repeating-radial-gradient(orange, purple 10px, orange 50px);