Posted on Jan 12, 2022 • Originally published at codewithsnowbit.hashnode.dev

Create Claymorphism Using CSS

Let's get started

Prerequisites for this project is very low and all our beginner friends can do; All we need is basic knowledge of HTML and CSS

In short, Claymorphism is:

Let's add some basic CSS and centre the content

* { box-sizing: border-box; } body { margin: 0; background: #a2e5ff; color: #2D3557; font-family: 'Poppins', sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; }

Note: Import Poppins fonts to your project

Now, it's time to create our card in the HTML file

<div class="card"> <h2 class="card-title">Have you tried Calymorphism</h2> <p class="card-text">Calymorphism is awesome!</p> <div class="card-button">Yes!</div> </div>

It's time to make it look beautiful 🌈

.card { width: 400px; padding: 50px; border-radius: 30px; background: #ffffff; text-align: center; box-shadow: 0 35px 68px 0 rgba(0, 94, 182, 0.42) } .card-title { font-size: 32px; margin: 0 0 8px 0; line-height: 1.3; font-weight: 600; } .card-text { font-size: 20px; margin: 0; line-height: 1.3; } .card-button{ font-size: 20px; font-weight: 900; margin-top: 10px; background: #2D3557; color: #ffffff; padding: 5px; border-radius: 30px; border: none; box-shadow: 0 17px 34px 0 rgba(0, 94, 182, 0.42); text-transform: uppercase; cursor: pointer; }

Tada 🎉 You created a card

Now, its time to transform it to Claymorphism

.card{ ... box-shadow: 0 35px 68px 0 rgba(0, 94, 182, 0.42), inset 0 -8px 16px 0 #4688ec; ... } .card-button{ ... box-shadow: 0 17px 34px 0 rgba(0, 94, 182, 0.42), inset 0 10px 26px 0 #24477c; ... } .card-button:hover{ background: #2D3557; color: #ffffff; box-shadow: 0 17px 34px 0 rgba(0, 94, 182, 0.42), inset 0 20px 26px 0 #24477c; }