How to make a 3d shadow on bottom of the container so it looks like the container is standing like t-CodePudding

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

CodePudding user response：

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>

CodePudding user response：

you can do that by using :pseudo-element, than add box shaddow to it, for example style.css

    .container {border: 5px solid black;
    width: 160px;
    height: 100px;
    border-radius: 20px;
    position: relative;
    }
    
    .container:after {
     position: absolute;
     bottom: -2px;
     width: 100%;
     box-shadow: 2px 3px 12px 1px rgba(0,0,0,0.75);
    }

index.html

<div ></div>