Subscribe

Typewriter effect CSS

✍️

How to make a typewriter CSS effect, making it look as you type some text

29 Nov, 2021 Β· 3 min read

In this article, we'll be creating a typewriter effect in CSS! We won't need any JavaScript to achieve this effect, and the result will look like this:

See the Pen Untitled by Chris Bongers (@rebelchris) on CodePen.

Alright, let's get started!

Setting up the HTML

As for the HTML, we don't need much. We want a paragraph or text element that we can manipulate.

<div>
  <p>Beetlejuice, Beetlejuice, Beetlejuice!</p>
</div>

Then let's quickly add some basic styling, so the text is centered:

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

And now we can add some basic styling to make the text stand out a bit more.

p {
  font-size: 2rem;
  font-family: 'Courier New';
}

By now, it should look something like this:

Styled typewriter in CSS

Adding the blinking type caret

Let's start by adding the blinking type caret at the end. This type of caret indicates a typewriter effect in most applications; I'll use the one from iAWriter, which is a blue one.

We can achieve this blinking caret by leveraging the right border of the p element.

border-right: 0.15em solid #18bdec;

Let's create a blink animation that will run forever to animate this.

animation: blink 1s steps(1) infinite;

This blink animation will be super simple as it only needs to change the border-color to be transparent halfway.

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

Adding the 1 step in the animation creates the quick blink effect instead of a slow fade.

Resulting in the following:

The typing effect

Now it's time for the actual typing effect.

We first want to make the p tag have 0 width and not wrap to other lines or show the overflow.

width: 0;
overflow: hidden;
white-space: nowrap;

Then we want to add the animation. Since we already have an animation, we can use a , to separate the two.

animation: typing 4s steps(38) 1s 1 normal both, blink 1s steps(1) infinite;

I used 38 steps as there would be 38 characters in my paragraph.

Let's have a look at how this typing animation should look.

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

Yep, that's a simple 0 to 100% width animation. And it will give us this excellent typewriter effect we are looking for.

You might have to play around with the animation settings to make your animation fit your text and font.

Try playing around with the duration (4s) and the steps to make it work best for you.

I hope you enjoyed this article and learned something new. Do share your creations with me on Twitter! πŸ‘€βŒ¨οΈ

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next πŸ“–

A look at HSL colors

5 Dec, 2022 Β· 4 min read

A look at HSL colors

Bringing perspective to CSS

7 Aug, 2022 Β· 2 min read

Bringing perspective to CSS

Join 1903 devs and subscribe to my newsletter