Search code examples
cssbox-shadow

inset box-shadow - same sides and bottom, top without visible shadow

How to make such a box-shadow?: enter image description here

Sides and bottom is same, top is 1px border, without visible shadow.

Solution

  • I do this that:

    div {
  box-shadow: 
  inset 0px -10px 4px -10px rgba(0, 0, 0, 0.6), 
  inset 10px 0px 4px -10px rgba(0, 0, 0, 0.6), 
  inset -10px 0px 4px -10px rgba(0, 0, 0, 0.6);
  background-color: white;
  border-top: 1px solid #bebebe;
  border-radius: 0 0 6px 6px;
  padding: 5px;
  width: 130px;
  text-align: center;
}

div:hover {
  box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.6);
}
    <div>dddddddddddd <br>dddddddddddd <br>dddddddddddd <br></div>