Blog

CSS Claymorphism Design using Html & CSS

CSS Claymorphism  Design using Html & CSS

 Heyy, learners so today’s project is the Claymorphism card. Yes you heard it right it is Claymorphism, it is not Glassmorphism. So Glassmorphism, a look which is similar to glass, it looks like that material is made up of glass. Similarly, a material that looks like it is made up of clay is  Claymorphism.

LIVE SERVER:-

See the Pen claymorphism by Himanshu Singh (@himanishu) on CodePen.

HTML(LAYOUT OF THE WEBSITE):-

 Inside the body tag, I added a div class named card and inside that an anchor tag instead of anchor u can use button also.

 <!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">  
   <title>Document</title>  
 </head>  
 <body>  
   <div class="card">  
     <a href="#">Claymorphism</a>  
   </div>  
 </body>  
 </html>

CSS(Styling of the layout):-

While styling we should take care that it should look like it is made up of clay. For it we try it to make it look smoother so we applied backdrop-filter: blur property makes it smooth and gives box-shadow to the card div and also the border-radius which is also really important to make it look smoother.

   *{  
       margin: 0;  
       padding: 0;  
     }  
     body{  
       width:100vw;  
       height:100vh;  
       display:flex;  
       justify-content: center;  
       align-items:center;  
       background-color: rgba(155, 155, 247, 0.13);  
     }  
     .card{  
   display:flex;  
   justify-content: center;  
   align-items: center;  
 background-color: rgba(139, 224, 248, 0.3);  
 height:30vh;  
 width:50vw;  
 border-radius: 25px;  
 box-shadow: 20px 20px 25px rgba(78, 202, 240, 0.589),  
 -5px -5px 25px rgba(61, 203, 247, 0.555),  
 -2px -2px 25px rgba(0, 252, 252, 0.534) inset;  
 border:1px solid rgb(145, 243, 243);  
 backdrop-filter: blur(15px);  
     }  
     a{  
       font-size: 30px;  
       font-weight: 900;  
       color:rgba(7, 90, 90, 0.5);  
       text-shadow: rgba(115, 238, 238, 0.795);  
       text-decoration:none;  
     }

I hope you liked it Wait, Did you still not implement it So why are you waiting, go and implement it now 😎.
If you faced any difficulty feel free to comment on your problems and If you really liked it, please show your love in the comment section this really motivates a blogger to provide more such content.

You can follow me on Instagram.

Written by @Himanshu Singh.

Check out more…..

Leave a Reply