Is it possible for the `drop-shadow` shadow to be applied only to certain elements?

Question

Is it possible for the `drop-shadow` shadow to be applied only to certain elements?

In the top image below, you can see how the drop-shadow effect would be drawn if applied to the top element. I am exploring the possibility of having the shadow cast only on specific objects, as shown in the bottom image.

I am open to unconventional solutions for this issue. However, I would prefer to still use the drop-shadow filter, especially with non-rectangular shapes.

Update: Here is a fiddle link as requested: https://jsfiddle.net/fhrktawm/

Additional Update: I am adding a more complex example to demonstrate my scenario. My aim is to create a sense of depth by adjusting the length of drop shadows.

css dropshadow css-filters

Answer 1

Answer №1

To achieve this, you can utilize the 4th value of box-shadow or drop-shadow. Simply position the shadow as shown in the provided screenshots.

Since the shadow of a square is always a square, it is essential to place it accurately where the intersecting part is also a 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 the ::after property to achieve a second 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>

However, due to another box being above (caused by transform-style: preserve-3d;), the box shadow cannot be placed below the box. An alternative method was attempted.

A different approach involves using the box-shadow of another element (the second one) with variations in the shadow as demonstrated in the following snippet:

.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>

The desired output can be achieved as follows :

.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>

Answer 2

To achieve this, you can utilize the 4th value of box-shadow or drop-shadow. Simply position the shadow as shown in the provided screenshots.

Since the shadow of a square is always a square, it is essential to place it accurately where the intersecting part is also a 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 the ::after property to achieve a second 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>

However, due to another box being above (caused by transform-style: preserve-3d;), the box shadow cannot be placed below the box. An alternative method was attempted.

A different approach involves using the box-shadow of another element (the second one) with variations in the shadow as demonstrated in the following snippet:

.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>

The desired output can be achieved as follows :

.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>

Answer 3

Answer №2

I'm currently exploring the idea of creating a shadow that specifically affects specific objects

In short, after some investigation, it turns out that achieving this effect is not possible with either the box-shadow property or the drop-shadow() filter.

Answer 4

I'm currently exploring the idea of creating a shadow that specifically affects specific objects

In short, after some investigation, it turns out that achieving this effect is not possible with either the box-shadow property or the drop-shadow() filter.

Is it possible for the `drop-shadow` shadow to be applied only to certain elements?

Answer №1

Update

Answer №2

Similar questions

What is causing the additional space at the bottom?

Guide to aligning a fraction in the center of a percentage on a Materal Design progress bar

Issues arise when attempting to insert data into an HTML file using PHP

What is the best way to include a background image in an Angular selector?

I encountered an issue with my h3 element's margin not being applied properly when I attempted to add

What causes the iframe to protrude beyond the bottom of the page when set to 100% height?

Strange Behavior of SVG 'fill: url(#....)' in Firefox

The preventDefault() function is not functioning properly on the <a> tag

The alignment of flexbox within a list item is not positioned at the top as expected

Enhancing Material UI icons with a sleek linear gradient

Achieve perfect vertical alignment for a set of three identical boxes using CSS media queries

Using Wordpress and JavaScript to dynamically hide a button if a product in the online store does not have an SKU

Visibility of the br tag is not detected

Strategies for avoiding unused style tags in React components

Text encoded in UTF-8 emerges from the surrounding frame

How can I incorporate dynamic moving lines into my website's loading sequence?

Tips for customizing the appearance of a child component using the parent component in Vue.js

Looking for recommendations on effective jQuery plugins for drag and drop file uploading?

How can you center the initial line of formatted text while keeping the rest left justified using just CSS?

How can I modify the appearance of a slider's range?