Cain Nuke Cain Nuke - 1 year ago 149
CSS Question

Achieve object projection effect with box-shadow


I am trying to achieve this effect in css:

enter image description here

This is my code:

#test::after {
background-color: maroon;
box-shadow:0 -50px 10px 7px;
height: 45px;
left: -15px;
position: absolute;
top: 40px;
transform: perspective(150px) rotateX(-45deg);
transform-origin: center bottom 0;
width: 60px;

but I am not achieving the expected result with the cast shadow. I wonder if its even possible to do this with CSS only?

Thank you.

Answer Source

Maybe something like this? I added another element representing the shadow:

#shadow {
  height: 90px;
  left: -15px;
  position: absolute;
  top: 30px;
  background: rgba(0, 0, 0, 0);
  width: 60px;
  transform: perspective(50px) rotateX(25deg);
  box-shadow: 0 -106px 20px 17px #808080;

enter image description here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download