How to make a 3d shadow on bottom of the container so it looks like the container is standing like this on image?

Question

I need to make a realistic 3d shadow that looks like the container is standing. Just like the image shows.

Answer 1

Instead of box-shadow, it can be implemented with a pseudo-element like ::before.

This is an over simplified example, but hopefully it will help as a reference.

Example:

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 30px;
}

div {
  position: relative;
  isolation: isolate;
}

figure {
  overflow: hidden;
  border-radius: 20px;
  z-idnex: 10;
  height: 200px;
}

div::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  height: 9px;
  borderradius: 25px;
  filter: blur(6px);
  background-color: #000;
  z-index: -1;
}

<section>
  <div>
  <figure>
    <img src="https://picsum.photos/200" />
    </figure>
    </div>
  </section>