Skip to content

Feature: Implement inset box-shadow #3

lojjic opened this Issue May 21, 2010 · 33 comments
lojjic commented May 21, 2010

Implement rendering of the 'inset' keyword in box-shadow.

Currently the code will allow this keyword when parsing but will not render it.

There is some partly-implemented code in BoxShadowRenderer.js, which no longer functions but at one point had a fairly good implementation for when the box is perfectly square (no rounded corners). Making this work with rounded corners will require a way to mask one shape with another, so we can create a border which gets blurred and then clipped to the shape of the padding-box. The Compositor filter may be an option.

jrmgx commented Jan 11, 2011

Is it possible to activate the inset keyword rendering and specify in the doc that it will work well only into squared element ?
I think that's a better way than preventing any rendering.

What should I change for my personnal use to get this working ?

lojjic commented Jan 11, 2011

The old code has been totally removed, because it didn't render accurately even in the square corners case, and used the blur filter which is horrible for performance. This needs to be rethought from the ground up.


I don't understand why this is so difficult. Say you want an element with a 5px inset shadow. Create a VML element 5px inside the target element, and give the new VML element a 5px outset shadow, only reversing the alpha / color darkness values. Done.

Or some other such method. Is it really such a challenge though?


I've the same problem! I can't see my inset shadow in a rounded div! :(
Hope that will be a solution early!


@matthewdl Does VML allow for outset shadows that have, say, gradients or images, and so on?


I dunno, maybe I have to learn some VML and throw something into this project. :-)

tmikaeld commented Nov 6, 2011

matthewdl: Please do if you have the time, text-shadow is very needed.

EDIT: Looking at CUFON, we might be able to use their method of creating text-shadow.


I'm really looking for an implementation of inset box-shadows in CSS3 PIE please! :)


Same for me, is there any progress on this issue? This would save me a lot of time/work for nicer css buttons in CSS3 (Like from which is much nicer with the inset box radius)

ayoung commented Mar 14, 2012


BMCouto commented Mar 19, 2012

Important issue here. Any plans to implement this feature?

lojjic commented Mar 19, 2012

Of course I hope to be able to implement this. Unfortunately I've made several attempts and have not yet found a method that works in any but the simplest cases. The issue is the limited nature of VML gradients and the lack of a way to clip shapes to non-rectangles in IE. I will of course continue to try, but be aware that this may prove to be impossible.

BMCouto commented Mar 19, 2012

That's too bad. Hope you can keep trying and find a way to implement it as soon as possible.


What about something other than VML's gradients? This might seem unconventional, but what about exploring something like VML extrusion? If you can extrude away from the visible object (into the bg), and if the extrusion could fade with a perspective distance, then maybe it could APPEAR to be an inset shadow as an optical illusion.

This is just a guess from poking around the VML documentation this morning. Not sure if it works that way in reality at all, but just tossing out ideas.

lojjic commented Mar 19, 2012

@matthewdl I'm open to anything that works! Extrusion is an interesting idea, I'm not sure if you can do the sort of fading you describe but let me know if you find otherwise.


Another idea: what about creating four elements, one on each side of the box, and creating a box shadow for each of them? Is that possible?

q13 commented Apr 1, 2012

wait in hope

mcmwhfy commented Jul 28, 2012

You can do it Jason, you did things much heavier than that :)

ghost commented Oct 10, 2012

are there any workarounds available? I'd really like to have this...


I've used border-image png with transparency for inset shadows where I need them in my projects, This is of-course not at all flexible if any properties change - border-radius, changing shadow properties, and you lose your CSS borders to the border-image. But it's a workaround to acheive a similar effect and at least there is still no extra markup.

If you're IE8+ then you could pseudo-element (:before + content) and style that with the border-image in order to save your regular element for normal borders. Just a few ideas - but all hacky workarounds . . .

ghost commented Oct 11, 2012

Ok thanks, I'll give that a try!

mturley commented Dec 19, 2012

Has anyone been working on this lately, or had any success with workarounds?

lojjic commented Dec 19, 2012

@mturley No.



Can you just do multiple background-gradients on the element in question? Render a gradient from [starting color] to [transparent] from each side depending on the shadow values. You should be able to round the corners with the background gradients, at least as far as I can tell with how PIE operates now.

Something using:
progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#ff000000, endColorstr=#00000000);

If this sounds really dumb, sorry I'm not terribly familiar with VML. But I do love PIE!

lojjic commented Jan 30, 2013

@MinionMan That's a good thought, and I've tried something along those lines. The difficulty comes when the gradient itself has to follow the contours of rounded corners, and is offset in some direction like most inset shadows in the real world are.


Hmmm square peg, round hole. I see the issue there...
What about (as terrible as it seems) offset elements of descending opacity with a colored border and transparent background? Not sure how the stacking works (elements cover text node?)

Or a single rounded element with a reversed outer-shadow (transparent inner to target color outer). The size and border-radius would have to be carefully calculated to match the parent element.


@lojjic, you mention in the radial gradients:
"VML's "radial" gradients are actually square (they extend evenly from the edges of the shape's rectangle to the center). "
Could this gradient be used to create the inset shadow? If it's following the curvature of the element, and you can put a stop in, and use transparency.

lojjic commented Jan 30, 2013

Yeah radial gradients (actually "gradienttitle" gradients work better) are fine for when the shadow has no offset, but as soon as you have an offset (like most real-world inset shadows) then they don't work because you want them starting from somewhere different than the edges of the shape. VML gradients can't do that unfortunately.

It's actually pretty easy to handle inset shadows for the following cases:

  • shadows with no offset, even with border-radius
  • shadows with offset, if there is no border-radius

It's the combination of offset and border-radius that has always been the problem, and I've opted thus far to ship nothing rather than shipping an implementation that handles only those two limited cases. I could possibly be convinced to change my mind on that though.


Quite the conundrum... I'll keep thinking on it. While it would be neat to have either option, the combination of both is definitely the most common call.

Perhaps a stroke on the the outside of a sub-element that contains the gradient that is offset inside the element creating the rounded corners? So we end up with a "border" the width of the offset, to fill the empty space?


best solution don't used old browser :) 👯

s1h4d0w commented Oct 10, 2013

I'd just like to mention that I too would love to see this implemented. I work for a company that uses CSS3PIE a lot and being able to use inset shadows would greatly improve the experience of visitors who do not use the most up to date browsers.

Buttons like these would be a breeze to make:
2013-10-10 11_54_01-button test


@lojjic I have a problem with box-shadow and IE - the only thing I want is to set ->inset<- in box-shadow and add some blur. Will pie support this ? If not, do you plan to add this behavior in a future version or update it? Thanks for you hard work, I'm using pie a lot.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.