ADVERTISEMENT

CSS Realistic Shadows to Image

Telegram Group Join Now

ADVERTISEMENT

CSS Realistic Shadows to Image

CSS Realistic Shadows to Image
CSS Realistic Shadows to Image

 

ADVERTISEMENT

ADVERTISEMENT

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

ADVERTISEMENT

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.

ADVERTISEMENT

Portfolio Website using HTML and CSS (Source Code)

Output

CSS Realistic Shadows to Image
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.

ADVERTISEMENT

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

Final Output oF CSS Realistic Shadows to Image

CSS Realistic Shadows to Image
CSS Realistic Shadows to Image

 

ADVERTISEMENT

CSS Realistic Shadows to Image
CSS Realistic Shadows to Image

 

ADVERTISEMENT

CSS Realistic Shadows to Image
CSS Realistic Shadows to Image

 

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Now we have completed our CSS section,  Here is our updated output with HTML and CSS. Hope you like the CSS Realistic Shadows to Image. you can see the output project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you!

In this post, we learn how to create CSS Realistic Shadows to Image. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

ADVERTISEMENT

Written by – Code With Random/Anki 

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT