CODEWITHSUNDEEP
cssinternet-explorerfiltergradient
esther h
esther h

Reputation: 1468

Simulating color stops in gradients for IE

I want to give a div a gradient with multiple color-stops, which IE's filter property does not support. Anyone have a creative workaround to simulate the color stops in IE? I already thought of creating multiple divs right next to each other... anything else?

Thanks!

Upvotes: 8

Views: 5845

Answers (3)

user984003
user984003

Reputation: 29589

Or use CSS3 PIE. Way easy.

From Setting linear gradient's starting and ending position in MSIE 9 and older

div {
    background-image: -moz-linear-gradient(360deg,rgb(255,255,255) 25% ,rgb(241,123,25) 75%);

    -pie-background: linear-gradient(360deg,rgb(255,255,255) 25% ,rgb(241,123,25) 75%);
behavior: url(/PIE.htc);
}

Update: if the div has a top margin then it seems to do away with it. At least in my case. Don't know if it's a combination of two things.

Upvotes: 2

Red
Red

Reputation: 3159

I'd recommend you to use a background image as a fallback for browsers (as Opera and IE) that don't support CSS gradients.

Upvotes: 3

jlmakes
jlmakes

Reputation: 2965

Multiple divs with coordinated gradient colors is the best way (short of using images) to create 3+ color gradients. See fiddle below for a working test:

http://jsfiddle.net/Hauhx/

Upvotes: 6

Related Questions