How to create typing effect using CSS
How To HTML CSS

How to create typing effect using CSS

Editorial Team
Editorial Team

Follow us on Discord or Telegram to get access to free tutorials and updates.

Typing effects are really impressive therefore it will surely grab the attention of your page viewers.

This post is about creating a simple typing effect using HTML and CSS. To stay basic, we’ll not be using JavaScript in this tutorial.

See the Pen Typing effect using CSS by Mishel Shaji (@mishelshaji) on CodePen.

Add HTML Markup

Add this simple HTML markup.

<div>
    <p>CSS Typing animation! <span>|</span></p>
</div>

Add CSS

body {
   background-color: #333;
 }
 div{
   overflow: hidden;
 }
 p {
   font-family: 'Courier';
   font-size: 22px;
   white-space: nowrap;
   overflow: hidden;
   width: 400px;
   color: #fff;
   animation-name: appear;
   animation-duration: 4s;
   animation-timing-function: steps(55, end);
   animation-iteration-count: infinite;
 }
 p > span {
   color: #fff;
   animation: blink 0.6s infinite;
 }
 @keyframes appear {
   from {
     width: 0;
   }
   ,
   to {
     width: 100%;
   }
 }
 @keyframes blink {
   from,
   to {
     color: transparent;
   }
   50% {
     color: #fff;
   }
 }

Try it yourself

See the Pen Typing effect using CSS by Mishel Shaji (@mishelshaji) on CodePen.