Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

CSS3 linear gradient syntax help



1:13 pm on Feb 25, 2011 (gmt 0)

5+ Year Member


I'm trying to create a gradient background using CSS3 techniques.
I'd like to make a linear gradient from top to bottom, and go from transparent to #eee. However, I'm having trouble with the syntax.

This is what I have so far:

background: transparent; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffeeeeee'); /* for IE */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0)), to(rgba(238, 238, 238, 1.0))); /* for webkit browsers */
background: -moz-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(238, 238, 238, 1.0) 100%); /* for firefox 3.6+ */

Can anyone help?


3:51 pm on Feb 25, 2011 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

That seems OK to me, you just to need to add
zoom: 1;
for IE<8 -
zoom: 1;
sets hasLayout to true, All filters need hasLayout to work in IE.

I just pasted your code, added it as background to a div#test, added zoom:1 just below the 1st background rule and it's working in IE, FF & Safari..

does that solve your issue or is there something else not working or problems in other browsers..

Featured Threads

Hot Threads This Week

Hot Threads This Month