Instant CSS
Tools
Templates
Components
Learn
More
Typewriter
Animation
Reveals text one character at a time with a blinking caret.
Reset to Default
HTML
Copy HTML
<div class="tw">Hello, world!</div>
CSS
Copy CSS
.tw { display: inline-block; font-family: 'Fira Code', 'Courier New', monospace; font-size: 22px; font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; border-right: 2px solid #4f46e5; width: 13ch; animation: typing 2.4s steps(13, end) infinite alternate, caret 0.7s step-end infinite; } @keyframes typing { from { width: 0; } to { width: 13ch; } } @keyframes caret { 50% { border-color: transparent; } }
Live Preview
Hello, world!
Tip:
Edit the HTML or CSS on the left to instantly see changes in the preview.