Is this tab-shadow possible in only CSS?


Is it possible to duplicate the shadow effect you see here: without any images and using only CSS?

Let me clarify.... look at the shadow, it's around the tab and the content block itself, not just a simple div tag...

Problem courtesy of: Webnet


try this:

#tab {
    -moz-box-shadow: 0px -10px 5px #888;
    -webkit-box-shadow: 0px -10px 5px #888;
    box-shadow: 0px -10px 5px #888;
    z-index: 1;
#content {
    -moz-box-shadow: 0px 0px 5px #888;
    -webkit-box-shadow: 0px 0px 5px #888;
    box-shadow: 0px 0px 5px #888;
    z-index: 0;

Solution courtesy of: mitch


Creating a CSS3 box-shadow on all sides but one has useful info on how to sort out the various box-shadow issues.

Discussion courtesy of: andreasbovens

Nope not that kind of 'faded' effect. You could do a solid shadow by playing about with some margins. But you would need a background image to get that faded effect.


You could use CSS3 to do it which would go something like this:

   box-shadow: 10px 10px 5px #888;
Discussion courtesy of: Chris

You need two boxes. One for the main one and one for the tab. The tab does not have a shadow on the bottom and must overlap the larger box to cover up that portion of its top shadow.

Discussion courtesy of: Diodeus

Only a idea...

If you use divĀ“s: You can try to use z-index with the tab div and align it to the content div to cover the shadow (of content div)...

But the round corners are the problem between tab and content div...

Discussion courtesy of: Mika

Since your tab will most likely contain an anchor to make it clickable, I'd make the anchor a block element, give a background color, and increase the height to cover the bottom part of the shadow.

Here is a demo:

Discussion courtesy of: Duopixel

Well this is two absolutely positioned divs, with the tab div z-indexed on top of the content div. You just set a -y 3px offset for the tab shadow and a 3 pixel blur and you're good to go. From playing around with it, you kind of need to use rgba, with a .5 alpha value in order to get the proper shadow effect.

alt text

Discussion courtesy of: Michael Mullany

This recipe can be found in it's original form on Stack Over Flow.