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.
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.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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.
background-color: rgba(155, 155, 247, 0.13);
background-color: rgba(139, 224, 248, 0.3);
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);
color:rgba(7, 90, 90, 0.5);
text-shadow: rgba(115, 238, 238, 0.795);