<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>Newmorphism animation</title>
</head>
<body>
    
  <div class="card">
    <p>Yash Thakar</p>
  </div>
  
</body>
</html>
body {
  background: #55b9f3;
}
.card p {
  color: #DCDCDC;
  text-align:center;
  font-size: 40px;
}

.card {
  border-radius: 50px;
  height: 200px;
  width: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  
  animation-direction: alternate-reverse;
  animation-name: Neumorphism;
  animation-duration: 5s;
  transition: 0.5s;
  transition-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.card:hover {
  animation-name: Neumorphism-hover;
  animation-duration: 5s;
  transition: .5s all;
  transition-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes Neumorphism {
  0%   {
        background: linear-gradient(45deg, #5bc6ff, #4da7db);
        box-shadow: 30px -30px 60px #489dcf, 
                -30px 30px 60px #62d5ff;
  }
  25%  {
    background: linear-gradient(45deg, #5bc6ff, #4da7db);
    box-shadow: 30px -30px 60px #489dcf, 
            -30px 30px 60px #62d5ff;
  }
  50%  {
    background: linear-gradient(225deg, #5bc6ff, #4da7db);
box-shadow: -30px 30px 60px #489dcf, 
            30px -30px 60px #62d5ff;
  }
  75%  {    
    background: linear-gradient(315deg, #5bc6ff, #4da7db);
    box-shadow: -30px -30px 60px #489dcf, 
                30px 30px 60px #62d5ff;
  }
  100% {
     background: linear-gradient(45deg, #5bc6ff, #4da7db);
    box-shadow: 30px -30px 60px #489dcf, 
                -30px 30px 60px #62d5ff;
  }
}


@keyframes Neumorphism-hover {
  0% {
    background: linear-gradient(45deg, #4da7db, #5bc6ff);
    box-shadow: 30px -30px 60px #489dcf, 
                -30px 30px 60px #62d5ff;
  }
  25% {
    background: linear-gradient(145deg, #4da7db, #5bc6ff);
    box-shadow: 30px 30px 60px #489dcf, 
            -30px -30px 60px #62d5ff;
  }
  50% {
    background: linear-gradient(225deg, #4da7db, #5bc6ff);
    box-shadow: -30px 30px 60px #489dcf, 
                30px -30px 60px #62d5ff;
  }
  75% {
    background: linear-gradient(315deg, #4da7db, #5bc6ff);
    box-shadow: -30px -30px 60px #489dcf, 
                30px 30px 60px #62d5ff;
  }
  100% {
    background: linear-gradient(45deg, #4da7db, #5bc6ff);
    box-shadow: 30px -30px 60px #489dcf, 
                -30px 30px 60px #62d5ff;
  }
}






Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.