87

I have a container that uses inset box shadow. The container contains images and text. The inset shadow apparently does not work on images:

The problem

The white section here is the container. It contains a white image, and there is inset box shadow applied to it.

body {
  background-color: #000000;
}

main {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 90%;
  height: 90%;
  background-color: #FFFFFF;
  box-shadow: inset 3px 3px 10px 0 #000000;
}
<main>
  <img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png">
</main>

Is there a way to make the inset box shadow overlap images?

1

11 Answers 11

96

Just to chime in on this, because I was just creating something similar...

I hate polluting my markup with extra elements for the sake of styling, so the CSS solution is to use the :after pseudo element:

main::after {
  box-shadow: inset 3px 3px 10px 0 #000000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}
<main>
  <img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png">
</main>

It's probably too late for what you were trying to do, but is the better solution in my estimation.

4
  • 1
    @SBO, you should use a wrapper element for elements with self closing tag like <img/>, <input/>. For example put the image element in a div element and give the .after shadow style to the div and you will see it works nice unlike @RyanS answer that need an additional div. Commented Jul 10, 2017 at 7:49
  • 1
    This is a great answer, but it does cover the main element, making text selection impossible. A minor weak is to make the height the same as the shadow size (10px in the above example) and replace top: 0 with bottom: 0.
    – Bo Jeanes
    Commented May 15, 2018 at 7:14
  • 1
    Surely you'd miss out on the left/right shadows then? pointer-events: none; would allow the contents to be clickable if that's an issue.
    – Rillus
    Commented May 16, 2018 at 8:34
  • that works but in case of position: relative added to main.
    – saintyusuf
    Commented Mar 20 at 12:49
77

Because the shadow is part of the parent container it renders below the image. One alternative is to have a div which places a shadow overtop the image like so:

body {
  background-color: #BBB;
}

main {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 90%;
  height: 90%;
  background-color: #FFFFFF;
  border-radius: 20px;
}

main img {
  border-radius: 20px;
}

.shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: inset 3px 3px 10px 0 #000000;
  border-radius: 20px;
  top: 0;
  left: 0;
}
<main>
  <img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png" />
  <div class="shadow"></div>
</main>

Edit: I've updated the fiddle to include border radius on the shadow and on the img which solves the issue identified in the comments.

6
  • 1
    While the solution works good in this particular case, it is not really ideal, because it does not work on rounded corners. The <main> also isn't scrollable if this solution is applied.
    – FalconC
    Commented Jan 28, 2014 at 21:02
  • Can you provide an example of those issues?
    – RyanS
    Commented Jan 28, 2014 at 21:49
  • You can compare the real shadow to the artificial shadow.
    – FalconC
    Commented Jan 28, 2014 at 23:07
  • @FalconC Well you've certainly come up with a challenge.. lol. Can you just add padding to the shadowed area to prevent it from covering things? or is that desired..
    – RyanS
    Commented Jan 29, 2014 at 0:18
  • I have just removed the box shadow from the containers. It has too much bugs that have to be fixed. '<div>'s and '<img>'s appear above the shadow. It simply doesn't work well on containers right now.
    – FalconC
    Commented Jan 29, 2014 at 9:32
9

The reason it's not overlapping is because the image is inside the div, so the image is on top of it. The image is higher (closer to the user) than the div.

You can change the image to use position: relative; z-index: -1, and have the containing div use a border instead of setting background color on the body. You'll need to use box-sizing: border-box to include the border in the width of the div.

DEMO

body {
    background-color: #FFF;
}

main {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: 60px solid black;
    box-shadow: inset 3px 3px 10px 0 #000000;
    box-sizing: border-box;
}

img {
    z-index:-1;
    position: relative;
}
2
  • 1
    This is a nice trick, although in a deeply nested context with backgrounds you may also need to make the parent of main be a stacking context to avoid hiding the img (in this case). Furthermore, Chrome seems to have some rendering bugs when main has overflow scrolling, worked around by -webkit-transform: translatez(0); on the img (!)
    – natevw
    Commented Apr 1, 2014 at 23:18
  • @natevw Good point. For more details see this answer Commented Dec 6, 2014 at 10:41
9

For those, who're using absolute-positioned, full-size :before/:after pseudo elements, consider using pointer-events: none on the pseudo-element so the original elements remain clickable.

7

The best way to achieve this in 2020 would be to use mix blend mode on the image. use the box-shadow on the parent element of the img and use mix-blend-mode: multiply.

2

You could set the image as the div's background instead:

background-image:url(http://www.placehold.it/500x500)

jsFiddle example

1
  • As stated in the question, the container will contain text and images, not just one image.
    – FalconC
    Commented Jan 28, 2014 at 21:04
2

https://stackoverflow.com/a/21415060/6235358 that's a great way to do it but we can do it in a better way using the ::after pseudo-class so you'll not have to add an empty <div> to your HTML

1
  • I can't seen to get the img::after to add anything to the image. Can you add a code snippet to your answer?
    – Thomas F
    Commented Sep 12, 2019 at 16:41
0

As Rilus mentioned we could use a pseudo class. Unfortunately this does not seem to work on an img tag for some reason however we can use a combination of inner and outer containers to achieve the affect we need.

.outer:hover .inner:after {
position: absolute;
content: '';
color: white;
display:block;
bottom: -0px;
right: -0px;
width: 100%;
height: 100%;
z-index: 11;
border: solid 10px red;
}

http://jsbin.com/kabiwidego/1/

not sure about ie 10 though as it seems to handle pseudo classes that are absolutely positioned slightly differently to most browsers.

1
  • 3
    The reason :before and :after content doesn't work is that <img> elements can't contain child elements. :before and :after generate a 'pseudo-element' which behaves like a child element - thus, any element which can't contain children (inputs are another common example), can't use generated content.
    – Ben Hull
    Commented Jan 19, 2017 at 4:10
0

One simple fix if you are clever with your decimals is to store your content in a separate div which you then select and implement a certain number of pixels from the top.

For example, let's say your header has a height of 50px. You could begin your #content div id 53.45px from the top (or whatever height your drop shadow is) and then your shadow would appear above the images.

One issue with this is that if you are using a rather transparent shadow, the more transarent it is the more tacky it may look by implementing this css.

In practice the code would be as follows:

HTML:

  <header>
Whatever's in your header
</header>

<div id="content>
Page content
</div>

CSS:

header {
    height: 50px;
    box-shadow: 0 5px 5px rgba(0,0,0,1);
}

#content {
    top: 55px;
}
0

You can use filters with SVG shadow.

Define shadow.

 <svg height="0" width="0" style="position:absolute;">
  <filter id="innershadow" x="-50%" y="-50%" width="200%" height="200%">
    <feComponentTransfer in="SourceAlpha">
      <feFuncA type="table" tableValues="1 0" />
    </feComponentTransfer>
    <feGaussianBlur stdDeviation="3"/>
    <feOffset dx="4" dy="4" result="offsetblur"/>
    <feFlood flood-color="black"/>
    <feComposite in2="offsetblur" operator="in"/>
    <feComposite in="SourceAlpha" operator="in" />
    <feMerge>
      <feMergeNode in="SourceGraphic" />
      <feMergeNode />
    </feMerge>
  </filter>
</svg>

Then apply the SVG filter over the container

.my-container{
   filter: url(#innershadow);
}
-1

Even if i'm late for the party, I had the same issue these days and worked on a solution. For me, the best solution (mobile friendly) is this one:

JSFiddle:

.image-inset-container {
  margin-bottom: 30px;
}

.image-inset-shadow {
  position: relative;
}

.image-inset-shadow img {
  border-radius: 20px;
}

.image-shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: inset 3px 3px 10px 0 #000;
  border-radius: 20px;
  top: 0;
  left: 0;
}
<body>
  <div class="image-inset-container">
    <div class="image-inset-shadow"><img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png" alt="img1" />
      <div class="image-shadow"></div>
    </div>
  </div>
</body>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.