Gradient colors in Internet Explorer

Question

I know that Internet Explorer has some proprietary extensions so that you can do things like create divs with a gradient background. I can't remember the element name or it's usage. Does anyone have some examples or links?

Answer 1

The code I use for all browser gradients:

background: #0A284B; background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887)); background: -webkit-linear-gradient(#0A284B, #135887); background: -moz-linear-gradient(top, #0A284B, #135887); background: -ms-linear-gradient(#0A284B, #135887); background: -o-linear-gradient(#0A284B, #135887); background: linear-gradient(#0A284B, #135887); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887'); zoom: 1; 

You will need to specify a height or zoom: 1 to apply hasLayout to the element for this to work in IE.

---

Update:

Here is a LESS Mixin (CSS) version for all you LESS users out there:

.gradient(@start, @end) {     background: mix(@start, @end, 50%);     filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@start~", EndColorStr="@end~")";     background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end));     background: -webkit-linear-gradient(@start, @end);     background: -moz-linear-gradient(top, @start, @end);     background: -ms-linear-gradient(@start, @end);     background: -o-linear-gradient(@start, @end);     background: linear-gradient(@start, @end);     zoom: 1; } 

Answer 2

Look at the custom CSS filters IE can handle http://msdn.microsoft.com/en-us/library/ms532847.aspx