Can the shadow from `drop-shadow` only be cast onto specific elements?

Question

The top image below indicates how drop-shadow would be drawn if applied to the top element. I'm trying to determine if it's possible to have the shadow cast only upon certain objects (as illustrated in the bottom image).

I'm open to non-standard solutions on this, but if possible I would prefer to still utilize the drop-shadow filter, as I'd like to use it with non-rectangular shapes as well.

Edit: A fiddle as requested. https://jsfiddle.net/fhrktawm/

Edit 2: Adding a more complex example to illustrate my use case. My purpose here is to indicate additional depth by varying the length of a drop shadows.

I haven't tried anything besides simply applying `filter: drop-shadow(-10px 15px 0 rgba(0, 0, 0, 0.25))` to an element. I can't think of a way to do this conceptually, so my question is a search for things to try. — David Link, Oct 11 '21 at 17:33
Yes provide `html` and `css` which created these boxes with `filter: drop-shadow(-10px 15px 0 rgba(0, 0, 0, 0.25))` — Rana, Oct 11 '21 at 17:34
@Rana These boxes were drawn in illustrator. I can write code that would draw the top version though. — David Link, Oct 11 '21 at 17:36
Basically no. That's not how shadows work in CSS or the real world. — Paulie_D, Oct 11 '21 at 17:37
@Paulie_D In CSS, sure. But in the real world, if 2 objects were suspended high enough above their background, they would cast shadows upon one another, but their shadows on the background would be diffused or out of frame. — David Link, Oct 11 '21 at 17:41
Looking at your updated question I think you are requesting something that CSS is probably not capable of. My understanding of how box-shadow/drop-shadow works is that it is essentially a single-layer, 2D effect creating the illusion of 3D. From the [MDN dropshadow ref](A drop shadow is effectively a blurred, offset version of the input image's alpha mask, drawn in a specific color and composited below the image.) - _"A drop shadow is effectively a blurred, offset version of the input image's alpha mask, drawn in a specific color and composited below the image."_ — Alexander Nied, Oct 11 '21 at 18:12
What you are looking for would require the browser to doing something much more complex than drawing a "blurred, offset version of the input image's alpha mask"-- it would need to be determining an implied source of light, and guessing at relative distances between items layered with z-index. I'm afraid this is more the stuff of rendered 3D environments than the CSS/DOM. But perhaps someone will prove me to be incorrect. — Alexander Nied, Oct 11 '21 at 18:14

Rana · Answer 1 · 2021-10-11T19:32:01.850

You can achieve that by using 4th value of box-shadow or drop-shadow .
And place shadow like in screen shots provided

As shadow of square is always square so it is possible at accurate places only when intersecting part is also square

.box {
  width: 100px;
  height: 100px;
  background: white;
  border: 1px solid black;
  margin-left: auto;
  margin-right: auto;
}

.box-1 {
  z-index: 10;
  box-shadow: -36px 36px 0 -25px rgba(0, 0, 0, 0.25);
  transform: translate3d(60px, 42px, 0);
}

<div class="box box-1"></div>
<div class="box"></div>

Update

You can use ::after property to achieve 2nd effect like this

.box {
  width: 100px;
  height: 100px;
  background: white;
  border: 1px solid black;
  margin-left: auto;
  margin-right: auto;
  transform-style: preserve-3d;
}

.box-1 {
  box-shadow: -36px 36px 0 -25px rgba(0, 0, 0, 0.25);
  transform: translate3d(60px, 42px, 100px);
    z-index: 100;
}

.box-1::after {
  content: "";
  width: 100px;
  height: 100px;
  position: absolute;
  box-shadow: -15px 15px 0 rgba(0, 0, 0, 0.1);
  z-index: -100;
  transform: translateZ(-100px)
}

<div class="box box-1"></div>
<div class="box"></div>

But as you can see another box is above (because of transform-style: preserve-3d;) as not able to get the box shadow below the box . Tried a different method .

So different approach is done by using box-shadow of another element 2nd one like in below snippet with some variations in shadow

.box {
  width: 100px;
  height: 100px;
  background: white;
  border: 1px solid black;
  margin-left: auto;
  margin-right: auto;
}

.box-1 {
  z-index: 10;
  box-shadow: -36px 36px 0 -25px rgba(0, 0, 0, 0.25);
  transform: translate3d(60px, 42px, 0);
}

.box-2::after {
  content: "";
  width: 100px;
  height: 100px;
  position: absolute;
  box-shadow: 45px -45px 0 5px rgba(0, 0, 0, 0.1);
  z-index: -1;
}

<div class="box box-1"></div>
<div class="box box-2"></div>

At last the desired output can be achieved like this :

.boxContainer {
  border: 1px solid black;
  width: 160px;
  padding: 20px;
}

.box {
  width: 100px;
  height: 100px;
  background: white;
  border: 1px solid black;
  margin-left: auto;
  margin-right: auto;
}

.box-1 {
  z-index: 10;
  box-shadow: -36px 36px 0 -25px rgba(0, 0, 0, 0.25);
  transform: translate3d(60px, 42px, 0);
}

.box-2 {
  box-shadow: -10px 10px 0 rgba(0, 0, 0, 0.25);
}

.box-2::after {
  content: "";
  width: 100px;
  height: 100px;
  position: absolute;
  box-shadow: 45px -45px 0 6px rgba(0, 0, 0, 0.1);
  z-index: -1;
}

<div class="boxContainer">
  <div class="box box-1"></div>
  <div class="box box-2"></div>
</div>

This is pretty clever. Thanks so much for your effort. Unfortunately it's not exactly what I'm after. I'll add another image to my main post to further explain what I'm trying to achieve. — David Link, Oct 11 '21 at 18:06
Intersecting part should be square so that shadow can be applied at accurate positions . Know that square can have rectangle shadow if seen from specific perspective . **But sometimes real world phenomenon are not always applied to virtual world phenomenon.** — Rana, Oct 11 '21 at 18:08
But as told @DavidLink intersecting part should be square . If you can have that much change than can try for further solution . As with that above solution is almost wrong — Rana, Oct 11 '21 at 18:11
Yes, once the poster updated their question it unfortunately invalidated your answer. However, I have upvoted you because what you provided was certainly a working answer to the question as originally posted. — Alexander Nied, Oct 11 '21 at 18:15
Yes that's why I added a note in `answer` and `comments` too to use a **square** intersection . And by the thanks for upvote — Rana, Oct 11 '21 at 18:18

score -1 · Answer 2 · answered Oct 11 '21 at 18:12

-1

I'm trying to determine if it's possible to have the shadow cast only upon certain objects

To be concise: no, this is not possible using either box-shadow or the drop-shadow() filter.

answered Oct 11 '21 at 18:12

Leland

2,019
17
28

Can the shadow from `drop-shadow` only be cast onto specific elements?

2 Answers2

Update