Add box-shadow to bottom of div from middle

Question

I've attached a preview of what I wanted. I honestly couldn't get the right words for it so I've got no luck searching how to do this.

Thanks a lot.

`box-shadow: 0px 3px 5px rgba(0,0,0,0.5);` – Blazemonger Mar 27 '17 at 20:02 — Blazemonger, Mar 27 '17 at 20:02
@Blazemonger sorry, this isn't what I was trying to do – phoenixWright Mar 27 '17 at 20:07 — phoenixWright, Mar 27 '17 at 20:07

josi · Answer 1 · 2017-03-27T20:42:45.037

You can use a pseudo element to create an oval shape and give it a box shadow. Play around with the box-shadow and height values to get exactly what you want.

div {
  width: 300px;
  height: 300px;
  background-color: #FFF;
  position: relative;
}

div:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  border-radius: 50%;
  z-index: -1;
  box-shadow: 0 8px 10px -10px rgba(0, 0, 0, 0.5);
}

https://jsfiddle.net/hkpy6eup/4/

score 0 · Answer 2 · answered Mar 27 '17 at 20:19

0

I just used displayed the image I provided to the bottom. Not sure if there's another way

answered Mar 27 '17 at 20:19

phoenixWright

77
1
12

Add box-shadow to bottom of div from middle

2 Answers2