<div class="clayBox">
  <h2>Claymorphism: Glassmorphic Edition</h2>
  <p>Glayssmorphism? Classmorphism? It's like glassmorphism but more colorful and softer feeling. Idk I didn't make it up I'm just trying it out.</p>
  <a href="#">Wow such button</a>
</div>


<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>  
<div class="floater"></div>

@c1:indigo;
@c2:spin(@c1,-90);

.clayBox {
  width:360px;
  height:auto;
  background:linear-gradient(to bottom right, fade(white,33%), fade(white,20%), fade(white,20%), fade(white,40%));
  border-radius:64px;
  box-shadow:inset 1px 1px 0px fade(white,33%), inset 9px 9px 36px fade(lighten(@c1,30%),50%), inset -9px -9px 36px  fade(lighten(@c1,15%),50%), 1px 1px 0px lighten(@c1,40%), 18px 18px 36px fade(darken(@c1,10%),50%);
  padding:36px 36px;
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  position:relative;
}

h2 {
  color:white; 
  text-transform:uppercase;
  font-size:24px;
  font-style:italic;
  line-height:1
}

a {
  float:right;
  text-decoration:none;
  background:@c2;
  padding:12px 24px;
  display:inline-block;
  border-radius:36px;
  color:white;
  font-weight:500;
  position:relative;
  top:0;
  box-shadow:inset 3px 3px 12px fade(lighten(@c2, 20%),40%), inset -3px -3px 12px fade(darken(@c2, 20%),30%), -1px -1px 0px fade(lighten(@c2, 40%),20%), 1px 1px 0px fade(lighten(@c2, 40%),40%), 3px 3px 18px fade(darken(@c2, 30%),20%);
  transition:350ms box-shadow 0ms, 350ms background 250ms, 250ms top 250ms;
  transition-timing-function:ease-in-out;
  &:hover {
    box-shadow:inset 3px 3px 12px fade(lighten(@c1, 20%),40%), inset -3px -3px 12px fade(darken(@c1, 20%),30%), -1px -1px 0px fade(lighten(@c1, 40%),20%), 1px 1px 0px fade(lighten(@c1, 40%),40%), 3px 3px 18px fade(darken(@c1, 30%),20%);
    background:@c1;
    top:3px
  }
}

body {
  background:linear-gradient(to bottom right, @c1, darken(@c1,20%));
  height:98.65vh;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:system-ui, sans-serif;
  font-size:18px;
  line-height:1.45;
  color:white;
  text-shadow:1px 1px 0.1em fade(@c1,50%)
}

.floater { 
  width:170px;
  height:170px; 
  animation:18s floater ease-in-out infinite;  
  opacity:.05;
  content:'';
  border-radius:48px; 
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-175%,-150%) rotate(0deg);
  z-index:-1;
  background:linear-gradient(to bottom right, white, fade(white,0%));
  @keyframes floater {
    25% {
      transform:translate(75%, -150%) rotate(180deg)
    }
    50% {
      transform:translate(75%, 50%) rotate(360deg)
    }
    75% {
      transform:translate(-175%, 50%) rotate(540deg)
    }
    100% {
      transform:translate(-175%, -150%) rotate(720deg)
    }
  }
  &:nth-of-type(2) {
    animation: 26s floater ease-in-out infinite;  
  }
  &:nth-of-type(3) {
    animation: 34s floater ease-in-out infinite;  
  }
  &:nth-of-type(4) {
    animation: 42s floater ease-in-out infinite;  
  }
}