The box-shadow shape is opaque behind the element background #12

lojjic opened this Issue May 23, 2010 · 8 comments


None yet

9 participants

lojjic commented May 23, 2010

The draft spec ( says that outset box-shadow rendering should only display outside the element's border-box, and be transparent behind it. This allows the element to have a non-opaque background and see through to elements behind it.

Currently PIE displays the box-shadow as a solid shape behind the element, so if the element has a transparent background then the view will be blocked by the box-shadow color.

This probably requires a way to mask the box-shadow shape with another shape equal to the border-box. Perhaps with the Compositor filter.

It seems unlikely that this will be a common problem in real-life designs, as usually when you have a shadowed element it has an opaque background color.


Dang. This is exactly what I'm trying to do... only with an inset box-shadow. I'm implementing a non-inset shadow in IE, but would love to use an rgba value for the background:


It should be documented somewhere that you can only really apply box-shadow to elements with opaque backgrounds.


Just ran into this problem; I sometimes use a transparent background image on certain elements, and not being able to have a truly transparent background on box-shadowed elements is a bit crippling at times.

I've worked around the issue on a couple of my sites, but a few sites won't be able to use CSS3pie until this particular issue is resolved...

kauffj commented Dec 22, 2010

I also just ran into this problem. I understand the difficulties involved in fixing this, but please add it to the docs at least. Thanks!


I actually need this feature, I have a transparent layer with a shadow, which is obviously not working in IE with PIE. I'll see if I can hack it up somehow, but I've never looked at PIE's code before nor I know anything about IE's internals, so it might take some time (which I don't have). If somebody has a couple fast pointers to where I should head to make this work, please adivse me!


+1 on what geerlingguy said

asgh commented May 8, 2012

I use jQuery animation to fade boxes in and out. After a fadeIn the box-shadow turns black, and no longer matches the background.

I'm OK if it has to ignore the opacity during the fade in/out animation, but once the animation is done it should fix the shadow since the background is no longer transparent.

I just realized this only happens on IE7, and not on IE8.


Check this one....CSS Transparent border with rgba


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment