CSS Reflective Shadows like Image | CSS Shadow

Share This Post

Share on facebook
Share on linkedin
Share on twitter
Share on email

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./card.css">
    <title>Card</title>
</head>
<body>

    <div class="container">

        
        <div class="card">
            <img src="./image.jpg" alt="">
        </div>
        


        

    </div>
    
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
}

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}


.card{
    width: 20em;
    position: relative;
}

.card > img{
    width: 100%;
    border-radius: .5em;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    -ms-border-radius: .5em;
    -o-border-radius: .5em;
}

.card::after{
    content: "";
    background-image: url("/image.jpg");
    width: 100%;
    height: 100%;
    position: absolute;
    top: 25px;
    left: 15px;
    background-size: cover;
    filter: blur(15px);
    -webkit-filter: blur(15px);
    z-index: -99;
}


Subscribe To Our Newsletter

Get updates and learn from the best

More To Explore

unfriend in bgmi
Uncategorized

How to UnFriend in BGMI Step By Step

Battlegrounds Mobile India is an online multiplayer battle royale game developed and published by Krafton. The game is exclusively for the Indian users. The game

How to Import Images in React Js

You can import a file right in a JavaScript module. This tells webpack to include that file in the bundle. Unlike CSS imports, importing a