simple firefox gradient examples

2 Dec

Most of the examples online are complicated, here are some simple
ones. (Actually i spotted a good article
http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ after
writing most of this.)

background: -moz-linear-gradient(top, red, blue);

Didn’t have to be so complicated after all. See it at http://jsbin.com/eluwu

“top” dictates not just the starting point, but the direction. Absent
anything else, “top” will make the gradient vertical, from top to
bottom. Similarly “bottom” would make it vertical in the opposite
direction (ie blue on top). Can also do “left” and “right” for
horizontal gradients.

You can also make the direction explicit:

background: -moz-linear-gradient(top 50deg, red, blue);

And then there are colour stops.

background: -moz-linear-gradient(top, red, green, blue);

background: -moz-linear-gradient(top, red, green 20%, blue);

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: