1.css

*  {
    margin: 0;
    padding: 0;
}

.wrapper{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.typing-demo{
    width:22em;
    animation:typing 2s steps(22), blink 0.5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    font-family: monospace;
    font-size: 32px;
    color:white;
}
@keyframes typing{
    from{
        width: 0;
    }
}
@keyframes blink{
    50%{
        border-color:transparent
    }
}
body {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(125deg, #2c3e50, #27ac60, #2980b9, #8e44ad)
      no-repeat;
    background-size: 400%;
    animation: bganimation 15s infinite;
    overflow: hidden;
    scrollbar-width: none;
  }
  @keyframes bganimation {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }