I'm looking to apply a box-shadow to only the bottom of a div element using CSS. The desired effect is shown in the image below: https://i.sstatic.net/L2vK4.png
I want to achieve the red line indicated in the picture above.
Here's my current code:
<div class="wrapper">
<div class="container"> //this needs box-shadow at the bottom
<span class="text">sometext</span>
<div class="description">some big description</div>
</div>
</div>
.wrapper {
position: absolute;
bottom: 32px;
width: 316px;
height: 225px;
background: white;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.29);
border-radius: 16px;
display: flex;
flex-direction: column;
opacity: 1;
}
.container {
height: 101px;
width: 316px;
padding-top: 16px;
padding-left: 16px;
border-radius: 16px 16px 0 0;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.29); //this adds boxshadow to all sides
}
.description {
height: 42px;
width: 289px;
margin-top: 8px;
color: black;
display: flex;
font-size: 12px;
font-weight: 400;
margin-bottom: 16px;
`;
The current code applies box-shadow to all sides of the container class. I'm seeking assistance on how to selectively add it only to the bottom. Any help would be greatly appreciated. Thank you.