Typing effect using CSS

CSS is powerful, you can do a lot of things without JS, also it's important because it controls all design-related aspects of your website.

Typing effect using CSS
Typing effect using CSS

Typography, colors, page layouts, and any other visual aspects of your website are all controlled by mighty CSS.

Let's see the typing effect without any JavaScript. Jump to the code!

<div class="container">
    <div class="type">
      This is one cool effect

And a little bit of CSS...

.container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
.type {
  width: 35%;
  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 typing {
  from {
    width: 0
@keyframes blink {
  50% {
    border-color: transparent

This is our result: