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 output

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;
  }