get CSS inset box-shadow to appear on top of inner backgrounds

Question

I want a CSS inset box-shadow to appear on top of the elements inside of the container with the box-shadow, specifically background colors of child-elements.

Demo: http://jsfiddle.net/Q8n77/

<div class="parent">
    foo
    <div class="content">bar</div>
</div>

<style>
.parent {
    box-shadow : inset 0 0 5px 0 black;
}

.content {
    background : #EEE;
}
</style>

Any ideas? Can do whatever with the HTML, but need to be able to click-through, so no 100% width/height DIVs on top of everything.

xec · Accepted Answer · 2016-02-02T14:53:55.683

11

If all you need is to have the inset shadow show through background colors, you can use transparent rgba (or hsla) colors rather than hex codes;

.parent {
    box-shadow: inset 0 0 5px 0 black;
}

.content {
    background-color: rgba(0, 0, 0, .2); /* .2 = 20% opacity */
}

Demo at http://jsfiddle.net/Q8n77/7/

edited Feb 02 '16 at 14:53

answered Jul 12 '11 at 22:35

xec

17,349
3
46
54

FYI, your answer led to this question about how to convert `RGB --> RGBA` colors :) http://stackoverflow.com/questions/6672374/convert-rgb-rgba – Jul 13 '11 at 00:26
This only works for colors that can be replicated by mixing them with 80% of what ever the underlaying background color is, which precludes most colors. And even then, it differs between colored and uncolored sections of content – Ben Philipp Jun 25 '22 at 18:56

score 5 · Answer 2 · edited May 23 '17 at 11:54

Not everyone has the ability to change HTML structure. If you can only access the CSS, you could try the following from this post: https://stackoverflow.com/a/13188894/491044

Alternatively, you can use a pseudo element:

HTML:

<div>
    a
</div>

CSS:

div {
    height:300px;
    color:red;
    position:relative;
}

div:before {
    content:'';
    display:block;
    box-shadow:inset 0 0 10px black;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

score 1 · Answer 3 · answered Jul 12 '11 at 17:33

1

One possibility is to play with the padding.

.parent {
    box-shadow : inset 0 0 5px 0 black; padding:.23em;
}

http://jsfiddle.net/jasongennaro/Q8n77/6/

answered Jul 12 '11 at 17:33

Jason Gennaro

34,535
8
65
86

score 0 · Answer 4 · answered Apr 23 '13 at 11:44

0

You can set box-shadow on both parent and child.

answered Apr 23 '13 at 11:44

Thomas Decaux

21,738
2
113
124

score 0 · Answer 5 · answered Apr 09 '15 at 08:06

Adding this approach since this is how I solved my version of this problem.

I basically add a ::before, or another element with a drop shadow in the parent, but offset it so only the shadow part is showing. Also I give the parent a overflow:hidden. This way, the content should still be interactive. :)

Mileage may vary depending on exact markup of course. But thought I should add this here.

codepen: http://codepen.io/mephysto/pen/bNPVVr

.parent {
  background:#FFF;
  width: 500px;
  height: 200px;
  margin: 0 auto;
  overflow: hidden;
}
.parent::before{
  content:"";
  display:block;
  width:100%;
  height:25px;
  margin-top:-25px;
  box-shadow : 0px 0px 25px 0px rgba(0,0,0,0.9);
}

xec · Answer 6 · 2011-07-12T22:23:16.087

0

you could try to position an overlay div on top of your parent with position: absolute; and give that the shadow (untested theory) with something like this:

HTML

<div class="parent">
    <div class="overlay"></div>
    foo
    <div class="content">bar</div>
</div>

CSS

.parent {  
    position: relative;
}

.content {
    background : #EEE;
}

.parent .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow : inset 0 0 5px 0 black;
}

edited Jul 12 '11 at 22:23

answered Jul 12 '11 at 03:27

xec

17,349
3
46
54

3

-1 because I ___specifically___ asked for no solutions like this – Jul 12 '11 at 04:42

score 0 · Answer 7 · answered Jan 19 '22 at 08:15

I would like to add something with xec's answer. I liked your suggestion. But I think it has to do with the transparency of the inner element. If the inner element has certain transparency then the shadow will appear.

Also, the strength of the shadow also depends on the transparency. The more transparent the inner element, the stronger the shadow and the strongest when the background color is transparent.

For example, if the background color is rgba(255,255,255,0.5) then the shadow will appear stronger than when it is rgba(255,255,255,0.7). And even if you use rgba scheme and your alpha value is 1 or the background color is rgba(255,255,255,1) then also the show will not show up.

Given that, it is not possible to show the shadow if the inner element has an opaque background color.

See the 3 examples here for reference: https://codepen.io/rajatkantinandi/pen/PoJgMMw?editors=1100

score -1 · Answer 8 · edited Dec 18 '13 at 14:48

-1

If you need shadow on top only, this will do it:

.element 
{
    box-shadow:inset 0px 3px 3px #BBB;
}

edited Dec 18 '13 at 14:48

Malachi

3,205
4
29
46

answered Apr 19 '13 at 07:03

Sidney Veiga

717
8
8

1

did you bother to read the question? Or are you just looking for really old posts with "shadow top"? – Apr 19 '13 at 16:22

get CSS inset box-shadow to appear on top of inner backgrounds

8 Answers8

Linked