🍱 Lunchbox Hands

CSS Typing Effect Generator

Typewriter and per-letter text animations in pure CSS

Generate a pure-CSS typewriter effect — classic typing, delete-and-retype loops, blinking cursors, or per-letter fades. Type your text, tune the speed, copy the CSS and HTML. Everything runs in your browser.

Hello, world.
Typewriter
Hello, world.
Delete & Retype
Hello, world.
Block Cursor
Hello, world.
Blinking Bar
Hello, world.
Silent Reveal
Hello, world.
Per-Letter Fade
Hello, world.
s
px
#6366f1
.lb-type-typewriter {
  display: inline-block;
  font-family: monospace;
  font-size: 24px;
  white-space: nowrap;
  overflow: hidden;
  width: 13ch;
  animation: lb-type 1.04s steps(13) infinite;
  border-right: 2px solid #6366f1;
}
@keyframes lb-type { from { width: 0; } to { width: 13ch; } }
.lb-type-typewriter { animation: lb-type 1.04s steps(13) infinite, lb-blink 0.7s step-end infinite; }
@keyframes lb-blink { 0%, 100% { border-color: #6366f1; } 50% { border-color: transparent; } }
@media (prefers-reduced-motion: reduce) {
  .lb-type-typewriter, .lb-type-typewriter > span {
    animation: none;
    transition: none;
  }
}

Get weekly dev tools and tips