bfahmi bfahmi - 4 months ago 12
HTML Question

how i can put the shadow inset from one side

i want the shadow to appear in one side (Top) with css only,

i have tried many solutions but always there is a shadow in all sides

this is my try



.box-container{
width:100%;
height: 80px;
padding:10px 10%;
background-color: #f00;
}
.box-inner{
width:80%;
height: 100%;
background-color: #ff0;
box-shadow: inset 0 5px 5px rgba(0,0,0,0.5);
}

<div class="box-container">
<div class="box-inner"></div>
</div>




Answer

Try to use this:

.box-container{
  width:100%;
  height: 80px;
  padding:10px 10%;
  background-color: #f00;
}
.box-inner{
  width:80%;
  height: 100%;
  background-color: #ff0;
  box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
}
<div class="box-container">
<div class="box-inner"></div>
</div>