Css attributes

How to Create a CSS Typewriter Effect for Your Website

In this article, you’ll learn how to make your website text dynamic and more engaging using pure CSS typewriter effects.

The typewriter effect involves the text revealing itself gradually, as if it were being typed before your eyes.

Adding typewriter effects to bits of your text can help engage your website visitors and inspire them to read more. The typewriter effect can be used for many purposes, such as creating attractive landing pages, call-to-action elements, personal websites, and code demos.

The typewriter effect is easy to create

The typewriter effect is easy to achieve, and all you’ll need to make sense of this tutorial is a basic knowledge of CSS and CSS animations.

Here’s how the typewriter effect will work:

  • The typewriter animation will reveal our text element changing its width from 0 to 100% step by step using CSS steps() function.
  • A blinking animation will animate the cursor which “types” the text.

Creating the webpage for our typing effect

Let’s start by creating our typewriter demo web page. It will include a

container for our typewriter text with a class of typed-out:

doctype html>
<html>
  <head>
    <title>Typewriter effecttitle>
    <style>
      body{
        background: navajowhite;
        background-size: cover;
        font-family: 'Trebuchet MS', sans-serif; 
      }
  style>
  head>
  <body>
    <div class="container">
      <div class="typed-out">Web Developerdiv>
    div>
  body>
html>

Style container for typewriter text

Now that we have the web page layout, let’s style it.

with the “typed” class:

.typed-out {
  overflow: hidden;
  border-right: .15em solid orange;
  font-size: 1.6rem;
  width: 0;
}

Note that, for the typewriter effect to work, we added the following:

  • "overflow: hidden;" and one "width: 0;"to ensure that the text content is not revealed until the typing effect has started.
  • "border-right: .15em solid orange;"to create the typewriter cursor.

Before doing the typing effect, in order to stop the cursor at the last letter of the typed-out element once it’s been fully typed, like a typewriter (or really a word processor) would do, we’ll create a container for the element typed-out element and add display: inline-block;:

.container {
  display: inline-block;
}

Realization of the text reveal animation

The typewriter animation will create the effect of the text inside the typed-out item being entered, letter by letter. We will use the @keyframes CSS animation rule:

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

As you can see, this animation only changes the width of an element from 0 to 100%.

Now let’s include this animation in our typed-out class and set its animation direction to forwards to ensure that the text element will not revert to width: 0 once the animation is finished:

.typed-out{
    overflow: hidden;
    border-right: .15em solid orange;
    white-space: nowrap;
    font-size: 1.6rem;
    width: 0;
    animation: typing 1s forwards;
}

Our text element will simply be revealed in one smooth step, from left to right:

See the pen
Smooth step by SitePoint (@SitePoint)
on CodePen.

Added steps to achieve a typewriter effect

So far our text is revealed, but in a fluid way that doesn’t reveal the text letter by letter. It’s a start, but that’s obviously not what a typewriter effect looks like.

To have this animation reveal our text element letter by letter, or in stageslike a typewriter, we have to divide the typing animation included by the typed-out categorize it into steps so it looks like it was typed. This is where the steps() The CSS function is available:

.typed-out{
  overflow: hidden;
  border-right: .15em solid orange;
  white-space: nowrap;
  font-size: 1.6rem;
  width: 0;
  animation: 
    typing 1s steps(20, end) forwards;
}

As you can see, we’ve split the typing 20 step animation using CSS steps() function. Here is what we see now:

See the pen
Multiple steps per SitePoint (@SitePoint)
on CodePen.

Here is our full code so far:

<html>
  <head>
    <title>Typewriter effecttitle>
  head>
  <style>
    body{
      background: navajowhite;
      background-size: cover;
      font-family: 'Trebuchet MS', sans-serif; 
    }
    .container{
      display: inline-block;
    }
    .typed-out{
      overflow: hidden;
      border-right: .15em solid orange;
      white-space: nowrap;
      animation: 
      typing 1s steps(20, end) forwards;
      font-size: 1.6rem;
      width: 0;
    }
    @keyframes typing {
      from { width: 0 }
      to { width: 100% }
    }
  style>
<body>
<h1>I'm Matt, I'm ah1>
<div class="container">
  <div class="typed-out">Web Developerdiv>
div>
body>
html>

Adjusting steps for longer keystroke effect

To fit longer chunks of text, you’ll need to increase the input animation steps and duration:

See the pen
Long typewriter effect by SitePoint (@SitePoint)
on CodePen.

Adjusting steps for shorter keystroke effect

And to fit shorter chunks of text, you’ll need to reduce the input animation steps and duration:

See the pen
Short Typewriter Effect by SitePoint (@SitePoint)
on CodePen.

Create and style blinking cursor animation

Obviously, the original mechanical typewriters didn’t have a blinking cursor, but it has become traditional to add one to mimic the more modern computer/word processor blinking cursor effect. The blinking cursor animation helps make typed text stand out even more from static text elements.

To add a blinking cursor animation to our typewriter animation, we’ll first create the blink animation:

@keyframes blink {
  from { border-color: transparent }
  to { border-color: orange; }
}

Inside our web page, this animation will change the border color of the typed-out element border — which serves as a slider for the typewriter effect — from transparent to orange.

We will include this animation in the typed-out the class rules and set its animation direction property to infinite to make the cursor disappear and reappear .8s still:

.typed-out{
    overflow: hidden;
    border-right: .15em solid orange;
    white-space: nowrap;
    font-size: 1.6rem;
    width: 0;
    animation: 
      typing 1s steps(20, end) forwards,
      blink .8s infinite;
}

See the pen
Blinking Cursor by SitePoint (@SitePoint)
on CodePen.

Setting code for flashing keystroke effect

We can make the slider thinner or thicker by adjusting its border-right: .15em solid orange; property, or you can give the cursor a different color, give it a border radius, adjust the frequency of its blinking effect, and more.

See the pen
Blinking cursor styled by SitePoint (@SitePoint)
on CodePen.

You can experiment with these properties in the CodePen demo and see what else you can find!

Combination of elements of typewriter text animations

Now that you know how to create the typewriter effect in CSS, it’s time for me to show you some practical and relevant use cases of this typing effect.

Portfolio typing effect

Here is an example of a personal portfolio. Typewriter effects can make your web resume / personal website stand out and make it more attractive.

Portfolio text lines revealed by typing effect

You can play with this portfolio demo on CodePen.

API typing effect

Here is an example of an API landing page.

API code revealed in typewriter mode

You can play with this API demo on CodePen.

Chances are that at some point in your development journey, you’ve come across an API provider landing page and seen a block of code like this, demonstrating their API implementation. Personally, I find this to be a really practical and relevant implementation of the typewriter effect, and I find it looks more appealing and inviting than a static piece of code.

Product landing page typing effect

Here is an example of a SaaS/product landing page.

Lines of text revealed in typewriter mode on a SaaS/product landing page

You can play with this SaaS product page demo on CodePen.

I have found that typewriter effects in SaaS or product landing pages are more inviting and engaging for visitors to use their products or services. Having spent a lot of time developing web services and web applications, I can say from experience that hit effects create extra interest in your landing pages. Typed text like “Get started today” gives the call-to-action text an extra punch.

Conclusion

We’ve seen in this article how easy it is to use CSS to create typewriter-like animated text. This typing effect can definitely add interest and fun to your web pages.

It may be worth ending with a slight disclaimer, however. This technique is best used on small portions of non-critical text, just to create a little extra fun. But be careful not to rely too much on it, because using CSS animation like this has some limitations. Be sure to test your typewriter text on a range of devices and window sizes, as results may vary from platform to platform. Also think about end users who rely on assistive technologies and ideally perform usability testing to ensure you are not making life difficult for your users. Because you box doing something with pure CSS doesn’t necessarily mean you should do it. If the typewriter effect is important to you and you want to use it for more critical content, maybe at least consider JavaScript solutions as well.

Anyway, I hope you enjoyed this article and it got you thinking about other cool things you can do with CSS animation to add touches of interest and fun to your webpages.