How to create a perspective shadow with CSS?


Tags: html,css,css3,css-transforms,box-shadow

Problem :

I know about the box-shadow property in CSS, but this produces a shadow that looks like projected on a wall right behind the element. I need to create a shadow that looks like the element is standing on the ground like this:

enter image description here

This is what I have so far:

div {
  display: inline-block;
  height: 150px;
  width: 150px;
  background: url(//placehold.it/150x150);
  margin-left: 20px;
  box-shadow: -5px 5px 10px 0 rgba(0,0,0,0.75);
}
<div></div>
<div></div>



Solution :

You can achieve this without using the box-shadow property on the element itself, but on the pseudo element ::before.

  • transform: skewX(60deg); will make it look like the light source is coming from the side
  • height: 10%; will make it look like projected on the ground
  • width: 70% and some positioning will hide the actual element
  • And at last box-shadow: -25px -4px 4px 0 rgba(0,0,0,0.75); will produce the shadow

Of course for older browsers you should use vendor prefixes.

div {
  position: relative;
  display: inline-block;
  height: 150px;
  width: 150px;
  background: url(//placehold.it/150x150);
  margin-left: 30px;
}
div::before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 15px;
  height: 10%;
  width: 70%;
  box-shadow: -25px -4px 4px 0 rgba(0,0,0,0.75);
  transform: skewX(60deg);
}
<div></div>
<div></div>


    CSS Howto..

    How to Set an if in css for opera browser? [duplicate]

    CSS How to get rid of border that appears around custom button on and after click

    How to make font sharp in CSS?

    in html and css how to get the box space to be smaller? [closed]

    CSS - HTML how to make the anchor image go to a specific spot

    How To Get Color of WebElement From Complicated css case using Webdriver?

    In CSS, how to create automatic section numbering only when there are multiple sections?

    How to make space between menu items in CSS/HTML

    How can I calculate in SVG coordinates?

    How to make a circle breadcrumb with only css

    How to highlight one image over other using jquery css? [duplicate]

    How to use “currentColor” CSS 3 keyword in LESS?

    Wordpress how to tell my css version

    How to morph multi-part css properties with Mootools Fx?

    How can I style XML with CSS for viewing in a browser without first transforming to (X)HTML?

    How do I spread out this navbar along with making the links exclusive to the button itself?

    How to toggle a div to slide up and down

    How to hide expand/collapse icon in vaadin treetable?

    How to overwrite “left: 80%” from inline CSS

    How can I adjust this carousel to only pause when user mouses over one of the boxes?

    How to make gutter between columns in a CSS grid system

    How to set css to more selectors when one of it is $(this)?

    how to modify height of a div when hover it and with transition (priority of CSS without Javascript)

    How to fit CSS buttons into table cells?

    How to concatenate icons into a single image with ImageMagick?

    How to make a smooth transition for css controlled by jQuery?

    How can I set css for a class in a class?

    how to increase the size of background image to cover all backgroung (but no repetition) [closed]

    Capybara/CSS: How to find an input field by label AND value?

    The input fields do not have the same width. How to resolve this CSS challenge?