Realistic shadows to image Css | shadows to image - codewithrandom

Realistic shadows to image Css | shadows to image - codewithrandom


Realistic shadows to image Css | shadows to image - codewithrandom

Welcome🎉 to Code With Random blog. In this blog, we learn that how to create  Realistic shadows. We use HTML & CSS  for these simple  Realistic shadows. Hope you enjoy our blog so let's start with a basic HTML structure for Realistic shadows.

HTML code

 <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 HTML code for the  Realistic shadows. Now, you can see output without CSS, then we write CSS for Realistic shadows.
Output
Realistic shadows to image Css | shadows to image - codewithrandom
Simple blank output because we do not give any styling to div

CSS code

 :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 section,  Here is our final updated output CSS.

Final Output
Realistic shadows to image Css | shadows to image - codewithrandom

Realistic shadows to image Css | shadows to image - codewithrandom

Realistic shadows to image Css | shadows to image - codewithrandom

Now we have completed our CSS section,  Here is our updated output with CSSHope you like the Realistic shadows, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

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

Written by - Code With Random/Anki 

Check out more.....

Post a Comment

Previous Post Next Post