CSS Typing Effect

In this tutorial we gonna learn typing effect in CSS. They are commonly used in hero sections, intro animations, or anywhere you want to add a hint of dynamism to your text content.

typing effect in CSS

HTML

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

CSS

  .wrapper {
    height: 100vh;
    display: grid;
    place-items: center;
  }

  .typing-demo {
    width: 22ch;
    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;
  }

Keyframes for Animation

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

Customization Tips

Adjust width in .typing-demo to change the length of the typing text.

Modify the animation-duration in typing for a slower or faster typing speed.

Use a different font or color to match your website's theme.

Thanks for Reading