Skip to content
Sign upLog in
This post is read-only. Explore Repls and connect with other creators on Community.View Community
The info in this post might be out of date, check out our docs instead. View docs

How to make the HTML/CSS typing effect.


Wassup my fellow replers. How's it hanging. I have been asked at least 10 times about the typing effect on my website and today I will be showing you guy's how to make it yourself.

since you asked :D

Before starting you want to create a new repl with HTML/CSS/JS because it will give you a subdomain. Inside this repl there will be 3 files. index.html, style.css, script.js.

We will be focusing on HTML and CSS today and no javascript. The one on my website is mainly javascript oriented but it's a bit complicated to understand. This is incredibly simple and good luck.


Inside your index.html file right after the <body> tag type the following lines of code :

<div class="main-container"> <div class="typewriter-text"> Typewriter Effect by Nathaniel </div> </div>

In this code there are 2 <div> elements. The first one is classed to main-container and we will set some overall css to it. We have to do this because we can't set them to the second <div>.

If you have done everything correct so far then your index.html file should look something like this, if not just copy paste from here :

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title></title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="main-container"> <div class="typewriter-text"> Typewriter Effect by Nathaniel </div> </div> <script src="script.js"></script> </body> </html>

Setting up the CSS

Now that we have completed the HTML part of this tutorial we can now move on to the CSS part. (Entire CSS can be seen at the bottom or in the repl below.)

We will first import our font and set some root css for the HTML, body, and main-container. I don't feel the need to explain each selector one by one so the code is here :

@import url(; html { width: 100%; height: 100%; overflow: hidden; } body { width: 100%; height: 100%; font-family: "Anonymous Pro", sans-serif; background-color: #111518; } .main-container { width: 100%; height: 100%; color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; }

On the first line of code we imported a font called Anonymous Pro, you don't have to use this font, you can add your own font of choice. Simply go to and find any font there and add it. If you need help adding your own font let me know in the comments and I will guide you step by step.

In the next 2 parts I have specified the width and height to 100%. The second part of code is the styling all the HTML that will affect every element on the page. The next part is the body, here we set the font-family aswell as the background-color.

The last part is the main-container we made earlier. To this we have once again added the width and height to 100% aswell as setting the text color to #fff which is hexadecimal for plain white. The next is positioning (see my article on the subject) we use flexbox in this tutorial and. The horizontal alignment set using justify-content and set to center, the vertical alignment is set using align-items and set to center.

Typing CSS

If you made it this far I salute you. Now that we have set the main CSS we need to put CSS for the typewriter effect. (Entire CSS can be seen at the bottom or in the repl below.)

Type this into your your style.css folder after what we just added :

.typewriter-text { overflow: hidden; position: relative; width: 18em; border-right: 2px solid rgba(255, 255, 255, 0.75); font-size: 38px; white-space: nowrap; animation: typewriter 4s steps(44) 1s 1 normal both, blinkTextCursor 400ms steps(44) infinite normal; } @keyframes typewriter { from {width: 0;} to {width: 18em;} } @keyframes blinkTextCursor { from {border-right-color: rgba(255, 255, 255, 0.75);} to {border-right-color: transparent;} }

To our typewriter-text we have position: relative; along with a width of 18 em. We have 2 animations here. One called typewriter which is the text being typed as a empty element just gets bigger and the blinkTextCursor which is just flashing.

This is the end of my typewriter text effect tutorial. I hope you learned something and if you need help with it just fork my repl or leave a comment with the link to ur repl.

Keep on coding 🙃

1 year ago




A good article, a good book can change the fate of many people. Thank you for your sharing, it has opened up many ideas in me, so that I can learn more about many valuable things. taming io

1 year ago
Load more