Sanjeev K Sanjeev K - 5 months ago 10
CSS Question

Centered drop shadow using css3, possible?

I am trying to create drop shadow which is centered with border, don't wanted to use image as background but not sure what would be the first approach.

Not requesting to write code, but if anybody give an idea how to achieve this would be really great.

I am attaching a image for reference, if you notice the in the center of the first, there is a small shadow.enter image description here

Answer

You can use a pseudo element

div {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  background: white;
  position: relative;  
}
div:after {
  content: '';
  border-radius: 50%;
  width: 100%;
  height: 20px;
  top: 80px;
  left:0;
  position: absolute;
  box-shadow: 0px 10px 5px #888888;
  z-index: -1;
}
<div></div>

Comments