Neumorphic Text Animation

In this tutorial, you will learn how to create a neumorphic text with animation using CSS. Watch the video below for a detailed tutorial.

HTML

<body>
	<h1>WINTERWIND</h1>
</body>

CSS

body {
  background-color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

h1 {
  font-family: sans-serif;
  font-size: 5em;
  font-weight: bold;
  color: #eee;
  text-shadow: 
    0 0 0 #b7b7b7,
    0 0 0 #f3f3f3,
    7px 7px 7px #b7b7b7,
    -7px -7px 7px #f3f3f3
  ;
  animation: animate 3s linear forwards;
}

@keyframes  animate {
  0% {
    text-shadow: 
      0 0 0 #b7b7b7,
      0 0 0 #f3f3f3,
      7px 7px 7px #b7b7b7,
      -7px -7px 7px #f3f3f3
    ;
  }
  100% {
    text-shadow: 
      7px 7px 7px #b7b7b7,
      7px 7px 7px #f3f3f3,
      0 0 0 #b7b7b7,
      0 0 0 #f3f3f3
    ;
  }
}