This article was originally published on March 2, 2010. It is now updated to include the latest browser support and syntaxes.
Safari 4+, Chrome 1+, Firefox 3.6+, and Opera 11.10+ are all now supporting CSS3 gradients. This wide browser support makes using them for progressive enhancement all the more appealing. More good news, CSS3 gradients fall into the camp where you can specify fallbacks (i.e. images) so that browsers that don't support them just use the image instead.
But wait... if you need to use an image anyway, why bother with declaring the gradient with CSS? That is kind of how I felt for a long time, but there is one important aspect that makes it worth it: browsers that support them don't load the image fallback. One less HTTP Request = all the faster your site will load.
How it's done
Cutting to the chase, here is the CSS for the most simple possible top-to-bottom linear gradient:
.gradient-bg {
/* fallback/image non-cover color */
background-color: #1a82f7;
/* fallback image */
background-image: url(images/fallback-gradient.png);
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(#2F2727, #1a82f7);
/* Safari 4+, Chrome 1+ */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(#2F2727, #1a82f7);
/* Opera 11.10+ */
background-image: -o-linear-gradient(#2F2727, #1a82f7);
}Different syntax for different rendering engines
Mozilla (Firefox, Flock, etc)
Mozilla's syntax (more detail here) is like this:
-moz-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>])The simplest way to declare a gradient is to just list a comma separated list of colors. That will start at the top and gradient to the bottom with equidistant color stops for each color. In the demo code above, we use a point and an angle (90deg) to it go bottom-to-top instead. For radial gradients: -moz-radial-gradient
WebKit (Safari, Chrome, etc)
WebKit's syntax (more detail here) for Chrome 1-9 and Safari 4-5 is like this:
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)They have now dropped the old syntax and moved toward something simpler. As of Chrome 10 and Safari 5.1 it's now like this:
background-image: -webkit-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); /* Chrome 10+, Saf5.1+ */Opera
As of Opera 11.10, Opera supports CSS3 gradients in the same format as Mozilla and the latest WebKit.
background-image: -o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); /* Opera 11.10+ */Trident (IE)
Trident's syntax (not really CSS3... more detail here) is like this:
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";"filter" should work in IE6-IE8 (haven't tested IE9), but it's not "valid" code. "-ms-filter" is valid, but only works in IE8+.
Unfortunately, we can't invite IE to the party! Using these filter properties does indeed work, and it would allow us to programmatically declare gradients which is cool. But, instead of using the filter first and the image as a fallback, declaring a background-image overrides the filter and it uses that. Since we definitely still need image fallbacks, we might as well not use this at all.
"Stops"
The WebKit and Mozilla syntax for gradients both incorporate "stops". A stop is an optional additional declaration that includes a point and a color. This means the gradient wont just start at one color and end at the other, it will fade to the stop color first, and that stop color will fade to the end color. More than one stop can also be used.
Saving HTTP requests
Using Firebug and looking in the Net tab to see all the resources used by the page, we can see the advantage.
The above screenshot is Firefox 3.6. We can see that the gradient fallback images are NOT loaded, which saves an HTTP request.
However using Firefox 3.5.8, the fallbacks are loaded.
We don't save any HTTP Requests in olders version of Firefox (This is 3.5.8 on Vista). The gradient fallback images are still being loaded (and used).
It gets a little more iffy in WebKit browsers.
WebKit browsers WILL use the CSS3 property to render the gradient, but at the same time, still load the fallback images, so no HTTP requests are saved. The only advantage is the programatic declaration of color.
UPDATE (August 9th, 2010)
As of this date, Safari 5.0.1 is still loading the fallback images, but Chrome 6.0.472.25 dev now joins the party of browsers that (awesomely) don't load the fallback image.
UPDATE (April 1st, 2011)
Safari is at 5.0.4 and is still loading fallback images. Opera 11.10 does the right thing out of the gate by not loading fallbacks.
Doing it by the numbers
The speed gained by losing an HTTP request, to me, is the biggest advantage. The more I learn about web performance it seems to me keeping those down is the #1 way to improve page load time. However there is another advantage to using CSS3 gradients, and that is that these gradients are created programmatically through numbers. Need to adjust some colors? Just adjust some numbers. No need to bring a big image editing program into the picture. This makes maintaining the site easier, as well as opens up doors for adjusting values on-the-fly. I imagine JavaScript libraries will begin to get the ability to animate these values soon enough, which will be pretty darn cool.
Ooooh Stretchy
When using an image for a gradient, it is declared as a CSS background-image and then repeated (you can often get away with a 1px slice, which is very efficient, size wise). The result though is that a static portion of the background is gradientized, and any overflow to that is flat color. Sometimes that works perfectly. Sometimes though it would be cool if the gradient stretched the entire height or width of the box. That is another thing CSS3 gradients can possibly be useful for:
So the big question is... is it really worth doing right now?
My answer on March 2nd, 2010: I'm thinking it's pretty darn close. If the numeric representation is a big deal to you, then I say yes you should start using them. If the speed is the only reason you would, then just realize that the only browser that it will help in is Firefox 3.6+, so you might wanna wait a bit on that.
My answer on April 1st, 2011: Pretty much yes, go for it, especially linear gradients. Linear gradients are more solid cross browser and browsers that don't support them are dropping in usage relatively quickly. Of course it depends on the exact use case, but typically a gradient is a visual nicety and thus a fallback of a solid color or image isn't such a big deal.
Additional Resources
- Latest syntax of WebKit gradients from the WebKit blog.
- Mozilla docs for linear gradients, repeating liner gradient, radial gradient, and repeating linear gradient.
- CSS3Please - latest syntax on gradients and many other CSS3 things.
- Lea Verou with clever and practical background techniques. Also see Lea's automatic gradients syntax converter thingy.
- Opera's introductory blog post on linear gradient support.
FYI: Different syntax for different rending engines, “Rendering” is spelled wrong.
:)
Great post! I really wish there were more browsers and users using CSS3.
Yes. It is definitely worth doing now. With server side scripting and a little JavaScript the possibility increases exponentially with CSS3.
Good to know.
Jeffrey Way did a great screencast using these not long ago here http://bit.ly/9zFMQR
Thanks for posting that link. The given information was really useful to me, same counts for the article here itself. I learned a lot
Great article Chris! Would definitely will give them a go!
Can’t we report (or ask?) Mozilla and Webkit to not request the fallback image? Something like a bug/feature request?
Shorter hand for Firefox if you don’t to get to fancy.
Where you can replace top with bottom, left, or right.
Great article! Webkit have a best syntax.
Nice writeup however the demo for the 180deg example is still showing 90deg in Safari 4.0.4. Also, if we don’t invite IE (trident) to this party because there are no performance gains then the same can be said for Safari/Webkit as it too loads the image. Furthermore, and I haven’t tested this yet, would using a conditional comment to target IE with its filter utilizing the !important override force the Trident engine to use the gradient instead of the image?
The problem with Trident is twofold:
• It loads the fallback image anyway
• If a fallback image is declared it uses that instead of the gradient filter
So yes, if you could figure a way to get it to at least use the gradient filter instead of the image, there would be an advantage (programmatic declaration of color) to using it. But as written in this article, there isn’t.
We can target IE (may be conditional comments or underscore hack) and set background to “none” and declare the filter. A bit more work but it means not loading the image which worth it.
Sorry! I didn’t see your last paragraph.
There is actually a proprietary IE filter to get gradients working in IE 5.5+. You just get a start and stop value though, not the fine grained control we have in webkit and mozilla
aaaaanndd i’m assuming that’s what you meant with “filter”.
I like the fallback image solution though, seems the most logical
Like Sean mentioned, there is a small typo in the demo code. It’s the 180-degree code that is wrong though. Webkit-browsers will show 90-degree gradient in both examples with the current code.
I believe the it should be:
background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#1a82f7), to(#2F2727)) !important;
or, in this case, easier to understand:
background-image: -webkit-gradient(linear, left top, right top, from(#1a82f7), to(#2F2727)) !important;
Thanks for a interesting article!
Thanks I fixed that… it was just me messing with it changing stuff around as I was learning how to use it.
I’m gonna leave in the keywords version you suggested so there are examples of both ways.
Really useful to know and definitely worth implementing now.
My problem with progressive enhancement to date has been that it’s only really practical for personal sites and blogs. Try explaining to a client that the beautiful gradients that he/she sees in the mock up will not actually be visible to a large proportion of the sites visitors. Now everybody sees the intended design without resorting to a conditional stylesheet.
CSS gradients are cool and sexy, but I’m not still convinced. If they weren’t declared via vendor specific syntax and their syntax was standarized, I would do the whole enhancement magic (like I do with rgba() and text-shadow). But now for me their code is too messy. Though the whole idea is just awesome.
I could not agree more. It’s weird how all the semantic, clean code aficionados are using these browser specific “css hacks”.
While I think it’s cool to stay progressive and try new things, it’s somewhat contradictory at the same time.
As of Safari 5 and Chrome 10 the syntax is standardised, and since users of these browsers are prompted heavily to update (or in Chrome’s case, updated automatically) it could be argued that we don’t need to provide the older Webkit syntax, just rely on the image fallback for the tiny minority that this would affect.
While I think this is awesome, I am getting a little tired of the fact that all of these things need 3 lines in the stylesheet to get them to work. This vendor specific syntax is annoying. And then to have to work around for IE garbage? Bah!
I’m with Mike above….when you have a client that uses an older browser and either can’t or won’t upgrade, you trying telling them that this looks awesome for others, but just ok for you.
Or, hey Mr. client, this looks great on the browser you are using, but for a lot of your visitors, some things will be missing or will look different.
Clients don’t want to hear that. They want it to be the same across the board. Progressive enhancement doesn’t mean a whole lot to them. To make it worse, the company I work for monitors what browsers our client’s visitors are using….and IE6 is STILL at about 25-30%.
I don’t think it’s useful.
A serious web designer would use sprites anyway, so requests aren’t an issue here (if you have 8 gradients on your page, you’re probably not going to save 8 files if you have any idea what you’re doing) …
Not working on IE is an issue. Not working properly in webkit-based browsers (still making the request) is an issue.
I’ll stick to sprites. And most of my gradients have a lot of effects that I don’t think css can (for now) reproduce easily.
Sorry that I have to correct you Chris, but Firefox 3.6 does support radial gradients.
The syntax is fairly simple, instead of using -moz-linear-gradient you simply use -moz-radial-gradient.
Check out this article with more information: CSS Gradients in Firefox 3.6
You can also have a look at my Beautiful Photoshop-like Buttons with CSS3 Tutorial, which features radial gradients in Firefox.
Nice summary of CSS Gradients in any case, thanks!
Mozilla does support radial gradients, it’s just a different property: -moz-radial-gradient.
Check out the reference page on the Mozilla Developer’s Center
I’ll support CSS gradients when I only need one syntax, and no separate browser-declarations.
Currently you hint in the direction of damn ugly rectangle boxes with a gradient
as soon as the design requires more details this will become tricky
i know that css3 will also have shadow’s and rounded corners and all, but we are still a long way from all these features working great together (with each other and with fallback images / colors)
so my oppinion would be “wait”
since my boss will not agree with a site that does not look like the design (yes, to the pixel, and yes, in all major browsers including my worst enemy IE6).
Sander
I’m finding it pretty amazing how many people are against the idea of progressive enhancement, citing angry bosses and clients.
But remember…
In thise case, this isn’t “how it looks” progressive enhancement, this is “how it works” progressive enhancement. Because we can use fallbacks, the look will be the same here.
It’s little details like this that make modern web design so much fun. Being able to accomplish these things outside of photo shop will completely change how sites are designed>
Chris, I gave gradients a sincere try. Tried and tried, with all my might. I found that, in many cases, specifying for multiple browsers didn’t play nice with each other.
That is to say, specifying for both mozilla and webkit blew off one or the other. And throwing opera into the fray blew them ALL off. And throwing in the proposed W3 spec …well… nada.
I tried the specs in all orders (one first, the other first, etc.) I tried with ONE background statement, then with one each. No luck. So, I gave up and retreated to an image.
I’m a gradient fiend. I’d LOVE to use them via spec. Mebbe I’m doing something terribly wrong. But no luck yet.
Since CSS 3 support is still not that good, I would suggest different approach – using SVG for backgrounds with little Javascript (to support all mayor browsers).
Take a look at this article at AListApart.com:
http://www.alistapart.com/articles/using-svg-for-flexible-scalable-and-fun-backgrounds-part-i/.
Nice idea! I wouldn’t thought of that, beacuse I’m not used to working with svg. But I’ll give this approach a chance.
So, the question that remains is:
Why bother with fallbacks anyways?
If certain browsers do not support all aspects of CSS2 and are not beginning to support CSS3, then why should we cater to their users?
“But then things won’t look the same!”
I say, so what?
As designers and developers, I feel it is high time we abandoned trying to make everything look the same in every browser. As long as standards compliance and graceful degradation are taken into account, this should not be a problem. If certain elements do not display on certain browsers then those users do not get as rich of a user experience as others. As long as the site still works correctly, this does not matter.
Bravo…NOT. Why should you cater to their users? Because they’re the ones the website is for!
I love Progressive Enhancement (not Graceful Degredation) and really want/try to use CSS3 as much as possible but I will never make (for example) an IE7 user suffer a worse experience than a Chrome user for the sake of being cutting edge.
If one of my designers has created a great design then as far as I’m concerned as many people as possible deserve to have the opportunity to experience it.
And quite often the ‘gracefully degraded’ version looks shocking – take the rounded corners, gradient and shadow off a button and all you get is a box.
So now that little rant is over, thanks very much Chris! A very informative post!
I stand somewhere in the middle. Graceful degradation should be considered professionally. One should look at their target market/user base/budget and evaluate how much time should be spent making improvements for older browsers.
@Matt – believe me, you will hear about it from clients if you build a site that looks the way it’s supposed to in your browser and not theirs.
@Jonathan – I wouldn’t go so far as to say a use “suffers” from lack of design. I do agree sites should still be semi-attractive in older browsers, however, it’s perfectly acceptable with a limited budget to tell users with older browsers that if they upgrade they will be able to enjoy the “full” experience.
Good post Chris.
Great article Chris! I’m going to have to give this a go.
I’m sure most here have seen modernizr which detects what browsers support which html5 and css3 properties. This solves the problem of the fallback image, but introduces a 3.9 kb js file with the http request and client-side processing. I’m curious how others here feel about modernizr and if it is worth the request, size, and processing.
One of the things we want for modernizr 2.0 is a build system so you can only include the tests you want.
Until then i think it’s totally fine to use the detection technique that we use internally on your own.
And then again, 3.9k aint too huge. :)
Very exciting to hear about version 2.0! 3.9k is tiny IMO and I have been using it on all of my new sites. Was trying to find out what others thought that have used it or thought about using it.
Most likely if you are using CSS3 gradients then you are using other css3 features like border-radius, box-shadow, etc. which I would think more than justifies the js file. i am not an optimization expert yet, though.
I need to get off my ass and start using modernizr… I like everything about it.
When it comes to using some of these cooler CSS3 technologies in their early stages the other question you may want to ask is how well and fast does the browser render the CSS3.
If the CSS3 short cut takes longer than the actual image retrieval then we might as well grab the image.
As for the browser specific declarations something like http://lesscss.org/ would be ideal.
great thank you, I will definately start using CS3, does CSS3 have cross browser issues,
Found a nice interactive gradient generator here: http://gradients.glrzad.com/
I prefer
http://westciv.com/tools/gradients/index.html
I really benefited from the list.
Thanks for your sharing!
I recently used gradients for a site because of the advantage it creates visually since the gradient can stretch to match the height on say a background. Here’s the site:
http://www.bronzetouchwf.com/
Compare a short page to a long one or use control+mousewheel (works in Chrome on Windows) to zoom out (Document > Zoom to fix that).
It’s subtle but nice…compare to IE or another browser without gradients and you can see the difference.
Already using it. Spread the word!
I second the already using it
Chris good stuff as always thanks so much
I can get pretty lazy when it comes to having to load up PS even to create a simple image. CSS gradients are so much easier and I’m fine backing that up with a solid color for folks that can see the gradient.
Also, I wrote a little utility to display various web stats and I hate seeing image resources top the list of most http requests. I’m going through now and trimming image resources where I can. This certainly helps do that.
Just an odd note, but does the footer of this site look off in IE7 to anyone else?
nm….it is when you bring the window size in. Footer doesn’t move.
I just started to use the css gradients last month, after I saw a few Nettut articles about them.
So far, I’ve only used them for drop shadows on divs to add a bit of depth for people with Firefox, Chrome and Safari. I stay away from using them for elements that depend on them, though.
The question I ask myself: “Would the art suffer without it?” If the answer is ‘Yes,’ I use older, more reliable methods at the cost of page load speed.
Nice! Been holding off using CSS gradients with a fallback as most browsers I’d tested in downloaded the image anyway.
It’s only one browser and it’s only one http request, but it doesn’t take a lot of effort & will give performance increases
Very nice article. Definitely going to try this out.
i use right now js gradients, it works in all browsers with the same sintax, and is easy to me to make all lighter to load, using svg is agreat deal too, but don’t work on ie without a adobe plugin
Another way to look at them is that if you use subtle gradients in your site, the fallback can be no gradient at all, just a solid color. So the site won’t look good in IE8 and prior, FF3.5 and prior,Opera 9 and prior,etc. Any non-CSS3 (even partial) browser that doesn’t support the gradient rule will see a solid color. But very soon, IE9 will be out, and within perhaps a year and a half, this subtle gradient fallback of simply a solid color might be acceptable.
Great article chris. I’m going to work some css3 gradients into my next project
-Anthony
Thanks for sharing this great article..
But still I have a query…..how to change mouse pointer with css?
Waiting for reply
Great article! I spent much time on this a little while ago, wish I found your article earlier – it would have save me a lot of time.
For those who don’t want to spend to much time building their CSS gradients (like me), I created a little tool:
http://www.display-inline.fr/projects/css-gradient/
There’s also support for Opera gradients, using SVG background.
Hey Chris, nice write-up!
I’ll just add a new twist to it: What about embedding your gradient as data-URI right into your background-property? That would also save you bandwidth and works in all modern browsers (apart from…, IE of course).
In addition you could then apply IE’s filter, as IE won’t get the message with that “strange” background-property.
PS: Yes, IE knows the proprietary data-URI-equivalent of MHTML, but that’s buggy under IE7 on >=Vista…
thx for this article and especially the demo. whenever I have to make a gradient I go to your demo and copy the code. thats very useful!
It seems this fallback works not only with gradients, but with RGBA backgrounds too.
E.g. when you want a semi-transparent background, you can use
Firefox 3.6 won’t download the background image.
Thanks for the great post.
FYI, I’ve seen a small typo on the “view demo” link on top, /examples/CSS3Gradient/ at that page you have same webkit properties for two gradients even though the gradients differ.
Great post! I learned a little more about CSS 3 gradients.
If you use
-webkit-gradient(linear, 0 0, 0 100, from(#0f82f7), to(#072727));instead of
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#0f82f7), to(#072727));gradient will not stretch.
You can use SVG for fallback as following:
background-image:url('data:image/svg+xml,');I.e. write usual SVG as data:url, you only need to replace „#“ with „%23“. Pros: you can modify gradients right in CSS. Cons: very large syntax.
Wrong code, the right one:
background-image:url(‘data:image/svg+xml,<svg xmlns=”http://www.w3.org/2000/svg”><defs><linearGradient id=”g” x2=”0″ y2=”100%”><stop offset=”0″ stop-color=”%232F2727″/><stop offset=”100%” stop-color=”%231a82f7″/></linearGradient></defs><rect width=”100%” height=”100%” style=”fill:url(%23g)”/></svg>’);
I don’t get it. If an image isn’t supported, why would you add another image?
Thank you! You just saved me about thirteen months of trying to figure this out on my own!
CSS gradients are finally supported pretty well, thanks for the heads up.
Just one thing, Mozilla is not a rendering engine, it’s called Gecko.
Well then, to add to Sunny Singh’s comment, Opera is not a rendering engine, it’s called Presto (layout engine). =)
I’m using CSS3 Gradients, Opera, Safari and Mozilla supports them great..
I use a gradient generator, that generates moz and webkit gradient, and a filter for IE.. but still I delete the filter for IE, and go for images..
Yes, the CSS will get huge when I need to specify 3-4 backgrounds each time for same element.. But it’s not the same size as what the background image would be, and I write my code nice, so easy to update, I save the requests on the browsers that support it, and some traffic.. So why not use them, I’m just thinking..
If possible, I’ll never open photoshop when creating sites.. because I can code the graphics I need, and for fixing Chrome, and IE etc.. I take a lovely screenie on the site.. Starting slicing the graphics out in Preview in mac.. works great.. and then I optimize the images after so it works perfect :)
It’s my way to create websites.. and they’re kinda fast :)
If you include fallback images as data uri, all browsers will load it and skip css gradients. Adding !important to gradient declarations forces browsers to use it. In addition, in IE9 if you use IE filters and rounded corners it just doesnt work. IE9 wont clip background to the border.
A simple workaround is to declare gradients for supported browsers and fallback image in IE condidional stylesheet. IE performance will suffer, but that’s just the price for using poor browser.
Another great tricks here.. the demo is good, hope to download the source code so I could test it right away.
I’ve recently started using CSS gradients and aside from the browser specific syntax (http://www.colorzilla.com/gradient-editor/ helps a lot) they work great.
The biggest advantage over sprites is that they’re vertically scalable. Even IE6 works just fine with linear gradients, which is probably the most common use for them.
Awesome….
great tricks…even I still learn…
thanks
Great stuff, thanks for sharing.
I’m using gradients on the menu for our website. I wanted to cut down image use to as little as possible using CSS3 techniques (many learned from you). The result for me is actually a website far more visually stimulating, satisfying and successful in its objectives then when I had the full blown power of Photoshop available to me. Not using images at all is arguably more restricting but then its implementation has almost forced me to create a more clean and functional design that isn’t overly cluttered with visual goodies.
Fallback wise, I’m sticking to solid color however.
Where did you find Opera 11.10?
Link in the footer of Opera.com
Here’s an interesting article I found on using SVG to get gradients to work in IE9 in a non ms-filter way
http://css3wizardry.com/2010/10/29/css-gradients-for-ie9/
Haven’t tried it yet, don’t know how it affects HTTP requests, and may just add an unnecessary layer of complexity, but may be worth investigating?
I’m glad to see you didn’t use the IE9 SVG fix for using gradients. I believe an anternative (old-school) background image will do just fine.
Thats the right solution, thx and i also works for my new sites. I alway searched for and there was no solution in pagespeed.
i have been trying to make a gradient background work for a site i’ve been drafting… but i haven’t found much in the way of cross-browser support.
http://www.denisebeaudet.com/new-index.html
for example: this works fine in FF4 on a mac and is *non-existent* for FF4 for Windows. annoying.
the other thing that is quite bothersome is the buggy aspect where if your browser window is set at something less than full-screen, and you then scroll to see what is “below the fold” (i.e. below the viewport bottom-margin), it reverts to the startcolor. very annoying and visually interruptive.
ideas? please?
thanks!
using the correct code would probably help. you left out the new syntax for Chrome, you don’t really need the old syntax for Chrome(IMHO) because Chrome auto updates. you’re also using svg for opera, why? gradients are supported in opera.
Go back through this article and re-read everything, you’ll see your problems pretty quickly.
Well it will certainly speed up one’s site. But what about the compatibility issues. For IE we need to use the js code for getting the bg gradient.
Thank you for this article.
I am using some gradients on my latest site.
It works great.
Sadly there are still people browsing with IE6 on my sites.
But with only 3% I am one of the lucky guys.
That is great post. It’s very nice. Thanks for shearing your ideas.
Awesome!!! Thanks for the breakdown!
Really cool trick here I didn’t know how to do. I’m think I’m going to go ahead and give it a go on one of my sites.
Great, i really like the part of testing in different browsers. currently i only apply and test in Mozilla 4. i m sure once it fix in Mozilla its automatically fix in other browsers too.
Thanks for of interesting decisions. I prefer to work always with the latest version.
Just a note: although you have dismissed IE, I can’t since 95% of our visitors use IE7-9. I have found that simple linear gradients ca be used as follows:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#FFFAE5′, endColorstr=’#FFDB95′);
Hope this helps some users who must live in the real world.
Dick
The web just got a whole lot more colorful. I have a tool that will generate the css for any linear gradient – and create the gradient even on IE6 using a simple behavior file i wrote for IE.
Enjoy (see the link in my contact info)!
Ron
Really nice tutorial. This is very helpful for a beginner like me. Thank you for taking the time to do all of that.