CSS Realistic Shadows to Image

Welcome to the Codewithrandom blog. In this blog, We learn how to Create CSS Realistic Shadows for Images. We use HTML and CSS for these simple Shadows.

I hope you enjoy our blog so let’s start with a basic html structure for Shadows to Image

HTML Code For Shadows to Image

<main>
<div class="image-card" style="background-image: url('https://source.unsplash.com/1600x900/?car')">
</div>
<div class="image-card" style="background-image: url('https://source.unsplash.com/1600x900/?bike')">
</div>
<div class="image-card" style="background-image: url('https://source.unsplash.com/1600x900/?boy')">
</div>
<div class="image-card" style="background-image: url('https://source.unsplash.com/1600x900/?girl')">
</div>
</main>

There is all the html code for the Shadows to Image. Now, you can see output without CSS, then we write CSS Realistic Shadows to the Image.

Portfolio Website using HTML and CSS (Source Code)

Output

Simple blank output because we do not give any styling to div

CSS Code For Shadows to Image

:root {
--size: 150px;
--radius: calc(var(--size) * 20 / 100);
}
body {
margin: 0;
background: #e9e9f4;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
margin: auto;
}
.image-card {
width: var(--size);
height: var(--size);
border-radius: var(--radius);
position: relative;
background-size: cover;
margin: calc(var(--size) * 20 / 100);
}
.image-card:before {
content: "";
position: absolute;
width: 90%;
height: 100%;
background-image: inherit;
background-size: cover;
border-radius: var(--radius);
z-index: -1;
filter: blur(12px);
opacity: 0.6;
left: 50%;
transform: translate(-50%, 10%);
}

Now we have completed our CSS Realistic Shadows to Image. Here is our final updated output HTML + CSS.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

Final Output oF CSS Realistic Shadows to Image