How to achieve curved drop shadow effect with CSS? - css

Question

I'm trying to achieve the following drop shadow effect using CSS:
I have tried styling an <hr> element with a linear gradient as the background image as an alternative to using the box-shadow rule on an image however it does not produce the desired curved shadow effect.
Is what I am trying to do possible via CSS only ?
Here is my current code:
HTML
<section class="section-categories section-fruits">
<div class="row">
<figure class="categories">
<img src="res/img/category/fruits.png" alt="Offers" class="categories__fruits">
</figure>
<div class="categories__explore">
<p>Fruits & Vegetables</p>
<p>A variety of fresh fresh and vegetables</p>
<button>Explore fruit and veg</button>
</div>
</div>
</section>
CSS
/* Using Box Shadow, but didn't get the desired effect */
.section-categories{
height: 250px;
margin: 20px 0px;
box-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}

Answer 1

One pure CSS approach might be to use the radial-gradient function on a pseudo element as follows:
/* The shadow CSS class element */
.shadow {
position:relative;
}
/* The CSS peseudo element that achieves the shadow effect */
.shadow:after {
content:'';
display:block;
position:absolute;
bottom:-1rem;
/* The main idea with this technique is to use a radial gradient to simulate the
desired effect */
background:radial-gradient(farthest-corner at 50% 0px, grey 0%, transparent 50%);
width:100%;
height:1rem;
}
/* The styling below is not part of the technique and is included to support the snippet */
div {
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
}
div button {
background:red;
}
<div class="shadow">
<img src="https://i.pinimg.com/originals/2b/1c/f5/2b1cf5525873467315eaa0c07394d302.jpg" height="100px" />
<button>Explore</button>
</div>
The idea here is to define a pseudo element :after the actual element casting the shadow (ie the <div> in the snippet above), which contains a radial-gradient. To simulate the desired effect, the radial-gradient is colored with a dark inner and transparent outer, with the center of that gradient being offset to the upper edge of the pseudo element via the farthest-corner at 50% 0px parameters.
Hope that helps