12

Is there a way to have a diagonal gradient in IE? In Chrome I could do something like this:

body{
    background-image:-webkit-gradient(
    linear,
    left top,
    right bottom,
    color-stop(0%,#f00),
    color-stop(50%,#0f0),
    color-stop(100%,#00f));
}

but this doesn't work in IE.

yoozer8
  • 7,361
  • 7
  • 58
  • 93
Web_Designer
  • 72,308
  • 93
  • 206
  • 262

2 Answers2

20

Yes, it is possible! Although it does not work as well as a real diagonal gradient in other browswers.

There are two important aspects of this solution that make it work:

  • Two divs with the same position and different z-index values (one on top of/in front of the other) and different gradient directions (one horizontal, one vertical)
  • Transparent/translucent colors in gradients (you can read about this in CSS3 Transparency + Gradient)

Simply place the div with the vertical gradient behind the div with the horizontal gradient (or vice-versa, it doesn't really matter), and make sure the coloring of the topmost gradient is not opaque.

The result looks like this (Internet Explorer 8):

several rows of divs (purple vertical backdrop, alternating red/blue horizontal forground) Larger sample

And the CSS:

//left sample
.back
{
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType="0", startColorstr='#880088', endColorstr='#110011');
    z-index:0;
}

.front
{
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType="1", startColorstr='#55ffa885', endColorstr='#55330000');
    z-index:1;
}

//right sample
.diaggradientback
{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow:hidden;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType='1', startColorstr='#ffa885', endColorstr='#330000');
}

.diaggradientfront
{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow:hidden;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType='0', startColorstr='#bbffa885', endColorstr='#bb330000');
}

Update:

The documention on this filter does say that multiple filters may be applied together. However, as it turns out, applying more than one gradient filter results in only the last one being applied, so simply applying both filters to one layer doesn't work, and two layers are necessary.

Community
  • 1
  • 1
yoozer8
  • 7,361
  • 7
  • 58
  • 93
  • 1
    Can you make a larger square and post a screenshot of it? It would be good to see how well it actually scales. – Shauna Aug 29 '11 at 19:17
  • Added. It's not an even gradient, but I didn't bother trying to tweak it to be. One could, if it were desired, but one could also have different effects for each direction. – yoozer8 Aug 29 '11 at 19:33
  • 1
    It's not the most semantically sound, nor concise way of doing it (but what cool effect is, under IE?), but cool nonetheless. – Shauna Aug 30 '11 at 13:34
  • a creative solution but not a perfect one – Tristanisginger Jan 20 '21 at 17:34
2

The short answer is, unfortunately, no, you can't. Microsoft's gradient filter is binary - only left to right or top to bottom.

You might, however, be able to use CSS3 PIE to do what you want. Keep in mind that PIE's support for gradients in IE9 is somewhat sketchy, though, and may or may not work, even if IE7 and 8 do (see their forums for some more info).

Shauna
  • 9,495
  • 2
  • 37
  • 54