Neumorphism CSS Animated Card Design

Hello Friends, today in this blog you’ll learn how to make Neumorphism CSS animated card design using only HTML & CSS.

Neumorphism is a great UI deisgn to create more attractive code snippets & landing pages and it’s very simple …u’ll just have to learn about CSS box-shadow property deeply or even u don’t need to learn it bcz there are so many free platforms/websites on which you can create neumorphism designs easily and copy the code & simply use in your project.

Video Tutorial of Neumorphism CSS Animated Card Design

In the video you’ve seen that we’ve easily created this amazing neumorphism design using simple CSS properties. First we simply create a container & added a box-shadow property so that it looks like a neumorphism design after that we’ve created a another box under container in which we put all the content. And finally styling the text using basic properties of CSS. After watching this amazing tutorial you can easily create such type of amazing neumorphism designs.

So, enjoy the tutorial & learn something new today 🙂

Neumorphism CSS Animated Card Design [ SOURCE CODE ]

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Neumorphism CSS Animated Card Design</title>
</head>
<body>
     <div class="container">
         <div class="card">
             <div class="box">
                 <div class="content">
                     <h2>01</h2>
                     <h3>Product Card</h3>
                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, totam velit? Iure nemo labore inventore?</p>
                     <a href="#">Read More</a>
                 </div>
             </div>
         </div>
     </div>
      
</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700;800&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    min-height: 100vh;
    background: #e0e0e0;
}
body .container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 40px 0;
}
body .container .card {
    position: relative;
    min-width: 320px;
    height: 440px;
    border-radius: 20px;
    background: #e0e0e0;
    box-shadow: inset 15px 15px 31px #bebebe,
                inset -15px -15px 31px #ffffff;
    margin: 30px;
    transition: 0.5s;
}
body .container .card:nth-child(1) .box .content a {
   background: #23c186;
}
body .container .card .box {
    position: absolute;
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    background: #c2bebe;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: 0.5s;
}
body .container .card .box:hover {
    transform: translateY(-50px);
}
body .container .card .box:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: rgba(255,255,255,0.3);
}
body .container .card .box .content {
    padding: 20px;
    text-align: center;
}
body .container .card .box .content h2 {
    position: absolute;
    top: -20px;
    text-transform: uppercase;
    right: 94px;
    font-size: 6rem;
    color: rgba(255,255,255,0.3);
}
body .container .card .box .content h3 {
    font-size: 1.6rem;
    margin-top: 70px;
    color: #1b1b1b;
    z-index: 1;
    text-transform: uppercase;
    margin-bottom: 20px;
    transition: 0.5s;
}
body .container .card .box .content p {
    font-size: 1rem;
    font-weight: 500;
    color: #1b1b1b;
    z-index: 1;
    transition: 0.5s;
}
body .container .card .box .content a {
    position: relative;
    display: inline-block;
    padding: 8px 20px;
    background: #1b1b1b;
    border-radius: 5px;
    text-decoration: none;
    color: #fff;
    margin-top: 20px;
    font-weight: 500;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    transition: 0.5s;
}
body .container .card .box .content a:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.6);
    background: #1b1b1b;
    color: #fff;
}

DOWNLOAD SOURCE CODE

Author
Recent Posts

codingmaster

Neumorphism CSS Animated Card Design

Published by codingmaster on August 20, 2021August 20, 2021

0 Comments

Leave a Reply Cancel reply