14 CSS Typewriter Effect Designs
07 / 14

All 14 in 14 CSS Typewriter Effect Designs

  1. 01CSS Typewriter steps() Cursor
  2. 02CSS Typewriter Multiline Stagger
  3. 03CSS Typewriter Word Swap Loop
  4. 04CSS Typewriter Neon Terminal
  5. 05CSS Typewriter clip-path Reveal
  6. 06CSS Typewriter SVG stroke-dashoffset
  7. 07CSS Typewriter Gradient Highlight Sweep
  8. 08CSS Typewriter Variable Font Weight Morph
  9. 09CSS Typewriter Split Char Stagger
  10. 10CSS Typewriter JS Character Injection
  11. 11CSS Typewriter Matrix Scramble Decode
  12. 12CSS Typewriter Glitch on Type
  13. 13CSS Typewriter Code Editor Syntax
  14. 14CSS Typewriter Scroll-Triggered Word Reveal
Pure CSSMIT licensed

CSS Typewriter Gradient Highlight Sweep

Text is revealed by a travelling gradient mask that sweeps left-to-right, creating a spotlight-highlight typewriter where unread text sits invisible and highlighted text glows into view.

Live Demo
Try it

Build UI like this from scratch: Flexbox, Grid, animations & responsive CSS

ZTM · The CSS Bootcamp · 30‑day money-back guarantee · Affiliate link

10% off at checkout with code
Check ZTM Course

The code

<div class="tw-07">
  <div class="tw-07__scene">
    <p class="tw-07__label">INCOMING TRANSMISSION</p>
    <h2 class="tw-07__text" data-text="The future is already here.">The future is already here.</h2>
    <div class="tw-07__bar"></div>
  </div>
</div>
.tw-07,
.tw-07 *,
.tw-07 *::before,
.tw-07 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.tw-07 ::selection {
  background: #06b6d4;
  color: #00090f;
}

.tw-07 {
  --cyan: #06b6d4;
  --blue: #3b82f6;
  --bg: #00090f;
  --dim: #0e2830;
  font-family: 'Courier New', monospace;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
}

.tw-07__scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  max-width: 560px;
}

.tw-07__label {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  color: #0e4a5a;
  animation: tw-07-fadein 0.5s 0.3s both;
}

.tw-07__text {
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  font-weight: 700;
  position: relative;
  white-space: nowrap;
  color: var(--dim);
}

.tw-07__text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: linear-gradient(
      90deg,
      transparent 0%,
      var(--cyan) 48%,
      #ffffff 50%,
      transparent 52%,
      transparent 100%
    );
  background-size: 220% 100%;
  background-position: 140% center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: tw-07-sweep 2.4s steps(26) 0.8s forwards;
}

.tw-07__bar {
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  box-shadow: 0 0 12px var(--cyan);
  animation: tw-07-bar 2.4s steps(26) 0.8s forwards;
  border-radius: 1px;
  align-self: flex-start;
  margin-left: calc(50% - 13ch);
}

@keyframes tw-07-sweep {
  from {
    background-position: 140% center;
  }

  to {
    background-position: -20% center;
  }
}

@keyframes tw-07-bar {
  from {
    width: 0;
  }

  to {
    width: 26ch;
  }
}

@keyframes tw-07-fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tw-07__text::after {
    background-position: -20% center;
    animation: none;
  }

  .tw-07__bar {
    width: 26ch;
    animation: none;
  }

  .tw-07__label {
    opacity: 1;
    animation: none;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Typewriter Effect Design from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: CSS Typewriter Gradient Highlight Sweep
Source: https://codefronts.com/motion/css-typewriter-effect/css-typewriter-gradient-highlight-sweep/

Text is revealed by a travelling gradient mask that sweeps left-to-right, creating a spotlight-highlight typewriter where unread text sits invisible and highlighted text glows into view.
## HTML
```html
<div class="tw-07">
  <div class="tw-07__scene">
    <p class="tw-07__label">INCOMING TRANSMISSION</p>
    <h2 class="tw-07__text" data-text="The future is already here.">The future is already here.</h2>
    <div class="tw-07__bar"></div>
  </div>
</div>
```
## CSS
```css
.tw-07,
.tw-07 *,
.tw-07 *::before,
.tw-07 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.tw-07 ::selection {
  background: #06b6d4;
  color: #00090f;
}

.tw-07 {
  --cyan: #06b6d4;
  --blue: #3b82f6;
  --bg: #00090f;
  --dim: #0e2830;
  font-family: 'Courier New', monospace;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
}

.tw-07__scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  max-width: 560px;
}

.tw-07__label {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  color: #0e4a5a;
  animation: tw-07-fadein 0.5s 0.3s both;
}

.tw-07__text {
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  font-weight: 700;
  position: relative;
  white-space: nowrap;
  color: var(--dim);
}

.tw-07__text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: linear-gradient(
      90deg,
      transparent 0%,
      var(--cyan) 48%,
      #ffffff 50%,
      transparent 52%,
      transparent 100%
    );
  background-size: 220% 100%;
  background-position: 140% center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: tw-07-sweep 2.4s steps(26) 0.8s forwards;
}

.tw-07__bar {
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  box-shadow: 0 0 12px var(--cyan);
  animation: tw-07-bar 2.4s steps(26) 0.8s forwards;
  border-radius: 1px;
  align-self: flex-start;
  margin-left: calc(50% - 13ch);
}

@keyframes tw-07-sweep {
  from {
    background-position: 140% center;
  }

  to {
    background-position: -20% center;
  }
}

@keyframes tw-07-bar {
  from {
    width: 0;
  }

  to {
    width: 26ch;
  }
}

@keyframes tw-07-fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tw-07__text::after {
    background-position: -20% center;
    animation: none;
  }

  .tw-07__bar {
    width: 26ch;
    animation: none;
  }

  .tw-07__label {
    opacity: 1;
    animation: none;
  }
}
```

How this works

The technique uses background-clip: text; color: transparent to make a linear gradient the visible colour of the text. The gradient has a hard stop: from a bright highlight colour before the sweep point, to the invisible background colour after it. Animating background-position from right to left moves that hard stop across the text, revealing one character at a time with a trailing glow on the freshly revealed characters.

A second pseudo-element layer provides the static dim-text baseline so unread characters are faintly visible (not invisible), making the sweep legible. The step count in steps() matches the character count, and the gradient width is tuned so the highlight halo is exactly one character wide before the cut.

Make it yours

  • Widen the highlight halo by increasing the gradient transition zone: change stop at 30% to a wider range like 20% to 40% for a soft-edged glowing sweep.
  • Combine with a text-shadow keyframe that fades from a strong glow (0 0 20px) to a dim glow (0 0 4px) after the sweep passes for a "cooling metal" effect.
  • Use a rainbow gradient — linear-gradient(90deg, red, orange, yellow, green, blue) — for a retro typewriter with colourful character reveals.

Gotchas — read before shipping

  • background-clip: text is only reliable when the element has no background set on a parent — if a parent already has a background-clip rule, inheritance can break the effect.
  • Firefox before 122 requires -webkit-background-clip: text prefix even though it's a W3C property; always include both the prefixed and unprefixed forms.
  • The hard-stop gradient approach assumes a dark background — on light backgrounds the "invisible" end of the gradient needs to match the page background colour, not transparent.

Browser support

ChromeSafariFirefoxEdge
63+14+122+63+

background-clip: text requires -webkit- prefix for broad coverage; Firefox 122 added unprefixed support.

Techniques used in this demo

background-clip: textMDN ↗@keyframesMDN ↗clamp()MDN ↗box-shadowMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →