CSS gradients for all web browsers, without using images
One thing that is quite nice is that we now have the ability to create gradients in our pages just from CSS code, and without the use of any images.
Syntax options and web browser support
The good news is that there is web browser support for CSS gradients in Firefox, Safari, Google Chrome and Internet Explorer (Opera will most likely add it soon too). The bad news is that, for a couple of reasons, the implementation in each web browser is different from the other. In IE’s case, it’s because it’s based on their ancient approach that stems form IE 5.5. For WebKit-based web browsers (like Safari and Google Chrome), they were the first ones to suggest it, based on the approach for canvas
, but this was later changed by the CSS WG, and the new syntax is now the one implemented in Firefox (and I guess this syntax will later make into WebKit-based web browsers as well).
There are two great articles on this topic, delver deeper into the syntax differences: CSS gradient syntax: comparison of Mozilla and WebKit and CSS gradient syntax: comparison of Mozilla and WebKit (Part 2).
So, as of now, we have have CSS gradients support for:
- Firefox 3.6
- Safari 4
- Google Chrome
- Intenet Explorer 5.5
Examples
Let’s look at some samples code:
Linear gradient, from top
This will show a simple linear gradient, going from top to bottom in a element.
<style> #gradient { color: #fff; height: 100px; padding: 10px; /* For WebKit (Safari, Google Chrome etc) */ background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff)); /* For Mozilla/Gecko (Firefox etc) */ background: -moz-linear-gradient(top, #00f, #fff); /* For Internet Explorer 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF); /* For Internet Explorer 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)"; } </style> <div id="gradient"> I haz gradient </div>
Rendered version
Linear gradient, from left
This gradient is rendered from left to right, for 70% of the width of the element. The color stop after 70% will not work in Internet Explorer; “interestingly” enough its FinishX and GradientSize properties doesn’t apply to the Gradient filter…
<style> #gradient-with-stop { color: #fff; height: 100px; padding: 10px; /* For WebKit (Safari, Google Chrome etc) */ background: -webkit-gradient(linear, left top, right top, from(#00f), to(#fff), color-stop(0.7, #fff)); /* For Mozilla/Gecko (Firefox etc) */ background: -moz-linear-gradient(left top, #00f, #fff 70%); /* For Internet Explorer 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FF0000FF, endColorStr=#FFFFFFFF, GradientType=1); /* For Internet Explorer 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF, GradientType=1)"; } </style> <div id="gradient-with-stop"> I haz gradient </div>
Rendered version
Radial gradient
Time to get a little bit funky with radial gradients! From what I have seen, there is no support for radial gradients in Internet Explorer.
<style> #gradient-radial { color: #fff; width: 100px; height: 100px; padding: 10px; /* For WebKit (Safari, Google Chrome etc) */ background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 60, from(#ffffa2), to(#00f)); /* For Mozilla/Gecko (Firefox etc) */ background: -moz-radial-gradient(40% 40%, farthest-side, #ffffa2, #00f); /* For Internet Explorer */ /* As if... */ } </style> <div id="gradient-radial"> I haz gradient </div>
Rendered version
Thoughts
For simple linear gradients, this offers quite a nice and simple way to offer and control it directly through CSS. Unfortunately, lack of support in Internet Explorer doesn’t make it as useful as it could be.
[…] (Gradienten) mit CSS3. Nette Idee. Einen Erfahrungsbericht dazu gibt's bei Robert Nyman. Ich habe einen Stil (Leder), bei dem sich die Anwendung vermutlich rentieren würde. Muss ich in […]
Nice reference, Robert!
Like Jonathan Snook said, “nothing says CSS3 like repeating a background declaration 4 frickin' times.”
Thanks for collecting all the different puzzle pieces for us!
Mathias,
Thanks! And yes, I agree with Jonathan. 🙂
David,
You are welcome!
anthony,
Images aren’t preferred because of the performance impact with multiple HTTP requests and sheer file size. Also, maintenance-wise, chaining a line of code is a lot easier, faster and cheaper (given software costs for image editing) than having images.
Sam,
True, although I believe it is upcoming in Opera.
Michael,
I have heard so, but not tested. If you’re on Windows, feel free to download the beta and test (most likely with the Opera prefix -o-).
[…] CSS gradients for all web browsers, without using images […]
[…] CSS gradients for all web browsers, without using images […]
dude, just use background images for gradients – its so much more efficient than writing 6 different statements for each browser.
It's not for ALL web browsers. There is no solution for Opera.
[…] Einige der neuen CSS3-Funktionalitäten sind ein wenig schwer zu merken, vor allem da man sich hinsichtlich der Syntax bei Webkit und Mozilla noch nicht ganz einige ist. Ein schönes Beispiel sind gradients, für die es sogar noch M$ Filter gibt, den man setzen kann, wenn man das will. Und nur bei linearen Farbverläufen. Einmal zum Mitschreiben. […]
I can’t see it with Firefox 3.5.7
Stefan,
That is because Firefox 3.6 is the first version to support it, as written in the supported web browsers list.
My understanding as per http://snook.ca/archives/html_and_css/multiple-bg… is that Opera 10.5 (beta on Windows, alpha on other platforms) DOES support CSS gradients. Please confirm.
Hmmm… For some reason, I don't see the sample effects under Firefox 3.5/Kubuntu Linux.
Aaln,
Right, because as mentioned in the post, support is from Firefox 3.6 and up.
It's a creative solution, but not ideal until a) there is better browser support (admittedly support is reasonable) and b) one solution works across all the browsers.
In the meantime I don't think that using background images for gradients is really that big a deal. A quick experiment shows that a one pixel wide, 1100 pixel high gradient comes in at under 1k filesize, and if the number of http requests is an issue then of course gradients can be stored within a CSS sprite.
Thanks for the links to my articles, Robert; this is a very good companion piece.
FWIW, the WebKit team have raised a couple of issues with the new syntax, so it may change slightly in the near future.
Richard,
In terms of web browser support, being supported in all web browsers but Opera (and on its way there), I think that's pretty good. Besides, for now, Opera could just get a solid background color as a fallback.
When it comes to image size, that is overall true, but with things like Serious Memory Leak Issue With 24-Bit PNG Images With Alpha Transparency In Internet Explorer it could become an issue.
Also, file size is one factor, but I believe HTTP requests and maintainability are important parts too. Sure, CSS sprites is an option too, but can be difficult to create, and very tedious to maintain.
At the end of the day, though, I think it comes down to what kind of gradient you want and how you will use it. This approach seems like a reasonable option for simple use cases.
Peter,
No, thank you for very good articles! And yes, we'll see there the syntax ends up in the long run.
[…] CSS – CSS gradients for all web browsers, without using images […]
Opera has long supported background gradients, using SVG background-images. The syntax is not too dissimilar from CSS gradients, see http://tutorials.jenkov.com/svg/svg-gradients.htm…
bruce,
Thanks for the tip. However, while it's a valid option, the idea was to offer everything from CSS and not to have separate code branching (and SVG, while interesting, is a completely different story 🙂 ).
It is worth pointing out that Microsoft's filters don't perform well (the DX stands for DirectX) if you have more than 1 or 2 on the page (instances, not style declarations) the CPU will ramp up and the page rendering freeze for a few moments while it does its thing.
If you have 1 or 2 large page backgrounds then you'll be ok, but say you had a gradient on a number of things, (for example a list of results, promo boxes, etc.) you may find you are better off with images.
dawn,
Absolutely, good point. One need to test in each specific use case, evaluate the results and take it from there.
Very usefull. Thank you very much this shared.
klima servisi,
You're welcome!
The Gradient Style Doesnt apply in The Firefox 3.5.3?
Any Suggestions are appreciated.
Amarnath,
As mentioned in the blog post and previous comments, the gradient support in Firefox is from version 3.6 and up.
A note for IE5.5+ developers: Gradients aren't applied to just any element!
MSDN Gradient Filter
JP.
Good point. I'm so used to having to trigger hasLayout in IE that I tend to forget about mentioning it.
Thanks for this article, helped a lot.
Michael,
You're welcome!
[…] Robert Nyman: CSS gradients for all browsers […]
[…] Robert Nyman: CSS gradients for all browsers […]
works like a charm, cheerios 🙂
Nice, but IE can only apply the filter on a few elements. I don't have a comprehensive list, but I found it doesn't work on THEAD, TR, or TD, for example, although it does work on TABLE.
[…] One issue I had with LESS recently was getting the mixin syntax working with IE’s filter syntax. The equal signs throw the compiler off. I was doing terrible IE things because I was doing cross-browser pure CSS gradients. […]
[…] CSS gradients for all web browsers, without using images […]
Thanks for this good summary of the different implementations.
Sadly this is again a bad example for having no standards. We are forced to play in different sandpit's instead of one. Why is it not possible to find a solution, that one implementation works in all browsers. Sure – we would need to bring all companies together. And that this is kind of a real big problem is shown in trying to get the new ECMA Script release.
Unless we have more standards, we have a lot of errors (JavaScript) or at least smashed designs (CSS).
On the other hand we all love this stuff for sure and it's good to see how it works. Again – thanks a lot Robert 😉
Cheers
Andy
Okay, for arguments sake:
Can you give me once instance where a gradient is useful. It's a design feature, and not content. It helps with making stuff look actionable, but then decent design would probably not rely entirely on gradients.
I'd encourage web developers and designers to steer away from IE filters, if only for the performance issues related to the rendering. Poor IE6 has trouble enough just drawing the page and dealing with our JavaScript, let alone gradient rendering (that said – anyone wants to prove me wrong there, I'd love to see some performance stats on filters vs. native CSS).
Just my argumentative 2 cents worth 😉
Andy,
Well, it is going in the direction of being standardized with just one single CSS approach. Unfortunately, that's far away at the moment, and this is our option for now (CSS-wise).
Remy,
That's kind of a huge discussion, but I'd say design (e.g. gradients) is extremely useful in teems of creating a better user experience, proven by Apple with a lot of their products.
With IE and performance on filters, absolutely, it's a valid question and in the end it comes down to testing and evaluating the experience for your specific use case.
And yes, I'd love test cases deeply evaluating filters performance in IE as well.
http://gradients.glrzad.com/ nice css3 gradient generator, doesnt support ie filters though. probably because its not css3 🙂
Andreas,
Nice, thanks for the tip!
i'm think you have knowingly ignored opera simply because there is no CSS way other than using the newer HTML5 canvas.
ruvan,
Yes, it was an unfortunate word choice.
nice work, only to let you know the gradient does not work in firefox on linux :o)
hope FF will do something for that soon.
Francis,
Really? Can't check right now, but if that's the case, it's not good.
I'm pretty sure I saw an effect like radial gradient in IE.
Also, quit whining in the comments people! These CSS properties are EXPIRAMENTAL (exculuding IEs old stuff of course). They are still drafts on w3.org, meaning they are still even subject to change. browsers that did implement them already used a prefix for the purpose of marking them as expiramental.
And its a good thing too, because if they hadn't a lot of websites will be broken when CSS3 would actually be finished, just because you guys only read misinforming blog posts for information instead of the offical specification/browser release notes.
And another thing, whats wrong with multiple HTTP requests? How is it a bad thing to devide content into different files that load individually, giving the user the option to stop, block, and or manipulate certain downloads in a page? Do you think a few bytes of HTTP headers are going to slow down your page loading time considerably? I guarantee you that your favorite JS library, that has functions you never use — and still load on every page, does a lot more damage to your loading time than than a few HTTP requests.
bit,
If you know about the radial gradient in IE, please let me know!
Regarding the number of HTTP requests, lots and extensive research by, for instance, performance guru Steve Souders (formerly of Yahoo!, now with Google) and by Yahoo!, described in Best Practices for Speeding Up Your Web Site, shows that too many HTTP requests is one of the biggest performance problem on the web. It's about superfluous header data, latency etc.
Here's a typical example of some http headers, taken from this pages' request:
<code>
Date: Wed, 19 May 2010 12:49:15 GMT
Server: Apache/2.0.54
X-Powered-By: PHP/5.2.6
Vary: Cookie,Accept-Encoding
X-Pingback: http://robertnyman.com/xmlrpc.php
WP-Super-Cache: WP-Cache
Content-Encoding: gzip
Content-Length: 24640
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8
200 OK
</code>
The concept of HTTP headers was created for a purpose, it wasn't created to slow things down.
Lets take a simple real-world case where headers can help speed things up:
A user might tell a browser not to load an image if its bigger than, say 10kb. Or even, a browser might prioritize its requests differently and load the bigger images last. The browser will need the Content-Length header to know what the image size is in order to make these decisions.
The size of the HTTP headers above is 339 bytes. 339 bytes people!
Lets compare it to something useless that I see on most webpages today; redundant jQuery functions. e.g. .animate(). You don't always use .animate() in your project, but you always include it. Why? because its comfortable to know its there when you need it, because its hard to build your own custom version of jQuery. Who pays the price? Your users.
That function is about 1.9kb in size, uncompressed, unpacked. I have no idea how much space it actually takes on the compressed and packed version of jQuery, but I'm sure its much more than a few bytes.
Conclusion — Before you run off into the sunset with some "genius" from Yahoo/Google, do your own research, use logic. You want to speed up your website? There is plenty of bad coding in things like JS libraries that you can tweak before you decide it's time to break/cheat the browsers' function.
<food-for-thought>
bit,
I'm not defending the size and number of superfluous functions in JavaScript libraries at all, and I agree they're overused.
However, this research is performed by a lot of people working for the highest trafficked web sites on the Internet, and it is common knowledge that a huge number of HTTP Requests affects performance poorly.
Regarding images: if you want even better performance there, base64-encode your images, resulting in no extra request and the possibility to gzip the output as well.
The biggest problems with HTTP Requests isn't header size, it's about latency and limited number of concurrent downloads in web browsers.
Alright, I can see how multiple images in a website might be a problem if you're using a lot of images and the browser limits the amount it will download at the same time.
However, it should only be used if your website has a lot of images. Because it is useful to devide images into different files, and because semantically, background-image was only intended for backgrounds.
bit,
I agree, you do need to adapt to your context needs, there's no solution fits all.
[…] the background for my work I used HTML5Doctor’s Audio in the browser article and Robert Nyman’s CSS gradient example and I have to say a few things about […]
[…] CSS Gradients For All Web Browsers, Without Using ImagesRobert Nyman explains how to code cross-browser CSS gradients that work even in Internet Explorer. […]
[…] CSS Gradients For All Web Browsers, Without Using Images Robert Nyman explains how to code cross-browser CSS gradients that work even in Internet Explorer. […]
google crome does not run this efficient as a hight of gradient effect
Hey Robert, do you ever think they will consolidate this so that redundant lines of code aren't needed for each different browser? just curious of your opinion, thanks!
Manish,
Not sure exactly what you mean, but it should work the same way as it works in Safari, as they are both based on the WebKit rendering engine.
Mikeyyy,
Oh, good question, I sure hope, but very hard to tell at this moment.
Thank you.
for collecting all the different puzzle pieces for us!
[…] CSS gradients for all web browsers, without using images – Robert's talk (tags: css css3 webdesign crossbrowser tutorial design) […]
[…] CSS gradients for all web browsers, without using images – Robert’s talk CSS gradients for all web browsers, without using images – #aea […]
[…] CSS gradients for all web browsers, without using images – Robert’s talk […]
@bit Total nonsense. First, no user actually sets up his system to not download images over some size. Second, it doesn't matter if jQuery is 1 megabyte. Most sites today link to jQuery at some common location, such as code.google.com, and so it will be cached, and take no time at all. But there will be latency at the web server for each extra connection for another file. So unnecessary images will slow a page down.
[…] about CSS on the internet which you can learn from. And you’ve probably heard also about color gradients in CSS. Just to give you an example, using color gradients in CSS is an easier way and smarter because you […]
Internet Explorer gradient filter doesn’t support color-stop, gradient angle, and radial gradient. That means you can only specify either horizontal or vertical linear gradient with 2 colors: StartColorStr and EndColorStr.
Check this article : http://www.dreamincoloronline.com/css-gradient-for-all-browsers/
Thanks man for this tutorial… Liked the rendered version.
Just wondering, as I didn’t see it mentioned. Why do the color declarations for IE all have 8 digits instead of the usual 6 for hexadecimal colors? How do I know, which ones to add and where (at the beginning or end)?
Frederiek,
The first two characters for IE are for alpha transparency, declared in a hexadecimal way. Basically, just change the last 6 digits and you will be fine.
You can, sort of, fake radial gradients in IE using ‘light’:
http://samples.msdn.microsoft.com/workshop/samples/author/filter/shortSamples/lightEX1.htm
Mkkl.
Mikkel,
Interesting, thanks!
[…] especially masochistic, there’s even a way to get simple linear gradients working in IE via Microsoft’s proprietary filters. Of course, those come with considerable performance penalties that even Microsoft is quick to […]
[…] gradients 1 more gradients 2 more gradients 3 […]
Nice article Robert. Another article for radial gradients in IE found on http://www.7synth.com/dev/gradients
Júan,
Thanks for the tip!
Hello, thanks a lot for the very useful guide.
I have still one issue with my website though: I am using gradients (through IE filters) in combination with Jquery animation, and this makes all the texts displayed on top of the gradient background transparent 🙁
Would you have a solution for IE to display solid colors instead of transparent texts?
Thanks,
Sebastien
hay, guys the gradiant with code does not work with some IE ?
[…] especially masochistic, there’s even a way to get simple linear gradients working in IE via Microsoft’s proprietary filters. Of course, those come with considerable performance penalties that even Microsoft is quick to […]
awesome man ! thanks for pulling me out of misery… Images can not be used always where this works… for instance, if I have growing vertically column, I can not use image as repeating background as I would have always limit to the image size and height of column if growing run time, this is what works there…
Again thanks a bunch!!
seb,
I’m sorry, no – there are a number of drawbacks to how IE handles this.
alex,
It should work with practically every IE in the market.
san,
Glad it helps!
nice… Opera is out
thank you very much
Im new to css and the code works great excpet I get a white border around the page in all three browsers (IE 7, FireFox 3.6.13 and Chrome 10). Is there a way to correct this so it fill the entire page?
Never mind i figured it out, it was my margin. I deleted it by accident when testing out the gradients. Thanks again. My boss likes the new look!
Matthias,
Glad it was appreciated!
can you help i have box with rounded corner and and gradient.
rounded corner made of behavior:url(border-radius.htc); works all brower(i didnt test ie 7 and before)
but i when i add css gradient works all browser except ie 8
it didint work in ie 18
pls help me
oguzhan,
I’m sorry, I don’t know how the rounded corners thing works. All I can tell you is that this is how you can achieve gradients with CSS.
here is my code
height:340px;
margin: 0 auto 0px auto;
padding: 0px;
position: relative;
/* declaration for Mozilla browsers like FireFox */
-moz-border-radius: 11px;
/* declaration for WebKit browsers like: Safari, Chrome */
-webkit-border-radius: 11px;
/* CSS3 declaration */
border-radius: 11px;
/* Linux browsers */
-khtml-border-radius: 11px;
/* maybe ALL IE */
behavior:url(border-radius.htc);
background: #eff5f7; /* old browsers */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#CDE8F2), color-stop(50%,#EFF7F9)); /* webkit */
background: -moz-linear-gradient(top, #CDE8F2 0%, #EFF7F9 50%, #EFF5F7 100%); /* firefox */
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#BADBE7, endColorstr=#EFF5F7, GradientType=1)”;/* For Internet Explorer 8 */
css 3 doesnt work ie 8
css3 -ms filter for gradient doesnt work in ie8
oguzhan,
Try adding this – it should only apply to IE:
background: none\9;
I’m hoping someone here can help me. I am trying to make a gradient background for a website I am drafting.
When the site first loads, it looks great. But if the user has their browser set to a smaller window and needs to scroll, the background “below the fold” reverts to the startcolor. 🙁
Here is the site in question: http://www.denisebeaudet.com/new-index.html
Any advice would be most appreciated.
jam,
That’s always a problem, but try experimenting with percentage values and maybe dynamic height on the body element.
So Opera is in its 11.1 version and it seems to be no support for gradients yet. C’mon Opera! Are you trying to sink indeed?
Edson,
Well, linear gradients are in Opera 11.10.
Great posts. Thank you very much this shared.
klima tamiri,
Thanks, glad you like it!
[…] http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/ Categories: CSS LikeBe the first to like this post. Comments (0) Trackbacks (0) Leave a comment Trackback […]
just to let you know to add for IE10
IE10 will be supporting gradients its the same as mozilla with the -moz but with -ms
example below
/*IE10*/
background: -ms-linear-gradient(left top, #017AC1, #00bcdf);
hope you found this helpfull
You are a life saver, I just spent 30 mins looking for these codes, so had half codes, codes for some browser, codes for some reason they wern’t working but mate, you are the greatest.
THANKS AGAIN!!!
Your css gradient code worked perfect
TimKola,
Cool, thanks!
Max,
Glad it helped you out!
Thanks, my site almost looks half decent in IE8 now.
Pete,
Glad it was of help!
[…] http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/ Vertikale Gradient: […]
You just saved my life!!!!!!!! THANK YOU SO MUCH FOR THIS POST!!
Jot,
Good to hear! 🙂
Excellent piece, it will smarten up the website no end!
BTW haven’t they built another building since you took your photograph of Hong Kong? It stands between the Mandarin and the Star Ferry terminal in Central Victoria.
R Brooke,
Thanks!
And yes, they might very well have been been building more there – which makes my picture even more special! 🙂
Doesn’t work in IE6. IE7 won’t render the radial background.
Julien,
As it says in the post: “…there is no support for radial gradients in Internet Explorer”.
[…] about CSS on the internet which you can learn from. And you’ve probably heard also about color gradients in CSS. Just to give you an example, using color gradients in CSS is an easier way and smarter because you […]
Kinda neat,
The css gradients still have some limitations over ones produced in photoshop, however, this takes up alot less memory.
Good post
Cory,
Not to mention maintenance and other factors.
Great article. I also like how you showed the different gradient directions.
kevin,
Thanks, glad you liked it!
[…] about CSS on the internet which you can learn from. And you’ve probably heard also about color gradients in CSS. Just to give you an example, using color gradients in CSS is an easier way and smarter because you […]
[…] ist bei weitem nicht alles was mit CSS3 möglich ist, wie der Artikel CSS gradients for all web browsers und der Eintrag in der Mozilla-Dokumentation es deutlich zeigen. Es ist nicht nur möglich lineare […]
[…] CSS gradients for all web browsers, without using images – Robert’s …Feb 15, 2010 … There are two great articles on this topic, delver deeper into the syntax differences: CSS gradient syntax: comparison of Mozilla and WebKit and … […]
Wow thanks! Our site looked pretty good in Firefox and Chrome but it went to pieces is IE. Your explanation solved my problem in less than 2 minutes!
Thomas,
Great, good to hear!
Opera browser was missed,
i use this for all browsers (include opera) , tested on :
IE 8.0 , FireFox 12.0 , Chrome 18.0 , Opera 12.0
background-color:#55aacc;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#55aacc’,endColorstr=’#ffffff’,GradientType=0);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5ac), color-stop(100%,#fff));
background: -moz-linear-gradient(top,#5ac,#fff);
background-image: -o-linear-gradient(#5ac,#fff);
kb667,
Thanks. I believe Opera hadn’t implemented it when I wrote this blog post.
It doesn’t support opera 9 or bellow.. 😉
asif,
Yes, but luckily you won’t find many users on such old versions of Opera.
CSS gradients for all web browsers, without using images – Robert’s talk
I dont know why but it dont work on my stylesheet
background: #1fb3dd; /* Old browsers */
background: -moz-linear-gradient(top, #1fb3dd 0%, #1fb3dd 15%, #336699 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1fb3dd), color-stop(15%,#1fb3dd), color-stop(100%,#336699)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1fb3dd 0%,#1fb3dd 15%,#336699 100%); /* Chrome10+,Safari5.1+ */
/* ie 6+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1fb3dd', endColorstr='#1fb3dd');
/* ie8 + */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1fb3dd', endColorstr='#1fb3dd')";
background: -o-linear-gradient(top, #1fb3dd 0%,#1fb3dd 15%,#336699 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #1fb3dd 0%,#1fb3dd 15%,#336699 100%); /* IE10+ */
background: linear-gradient(top, #1fb3dd 0%,#1fb3dd 15%,#336699 100%); /* W3C */
-moz-border-radius-bottomleft: 6px;
-webkit-border-bottom-left-radius: 6px;
border-bottom-left-radius: 6px;
-moz-border-radius-bottomright: 6px;
-webkit-border-bottom-right-radius: 6px;
border-bottom-right-radius: 6px;
Please help. Thanks
Admin blog,
Please look at the CSS gradients demo, copy the code and take it from there. Good luck!
Presents: CSS gradients for all web browsers
[…] about CSS on the internet which you can learn from. And you’ve probably heard also about color gradients in CSS. Just to give you an example, using color gradients in CSS is an easier way and smarter because you […]
CSS Gradients are very useful to decrease the page load time for one’s site.
Can anyone guide how to give 3 different colors in gradient for IE???
Karthik,
According to Microsoft’s documentation I believe you can only set a start and an end color.
Thanks so much, is useful.
Hi Robert,
Thanks! 🙂
[…] other useful trick it to apply CSS gradients like so, this is so handy when working with designers, you can just pop them in, and unlike image […]
[…] gradient3 […]
thanks for the tut bro. helps me alot with the IE 8 🙂
Gradient Code is working fine for all browsers.
[…] CSS Gradients For All Web Browsers, Without Using ImagesRobert Nyman explains how to code cross-browser CSS gradients that work even in Internet Explorer. […]
Is there a code for all browser? Do I really have to code gradient for all browser? I don`t like this… Please help
everything is ok how it works on IE8