How to create Typing Effect in CSS

Learn with us how to create Typing Effect in CSS!

If you found us on TikTok on the following post, check out this article and copy-paste the full code!

Happy coding! 😻

@creative.tim Have you tried this one yet? Maybe share it with someone who could use it 😎 #css #coding #programming ♬ original sound - Creative Tim

1. HTML Code

<div class="wrapper">
    <div class="typing-demo">
      Creative Tim: This is a typing demo.
    </div>
</div>

2. CSS Code

.wrapper {
  height: 100vh;
  /*This part is important for centering*/
  display: grid;
  place-items: center;
}

.typing-demo {
  width: 36ch;
  animation: typing 2s steps(22), blink .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
  font-size: 2em;
  
}

body {
  background-color: #AFCBFF;
}

@keyframes typing {
  from {
    width: 0
  }
}
    
@keyframes blink {
  50% {
    border-color: transparent
  }
}

I hope you did find this tutorial useful!

For more web development or UI/UX design tutorials, follow us on:

Other useful resources: