Open menu

CSS Text Effects

Style headings with ten families of text effects, including gradient text, outlines, long shadows, neon glow, glitch, typewriter, reveal-on-load, scrolling marquees, highlighter marks and 3D extrusion. Choose from 60 presets, adjust the font, size, colors, speed and depth, then copy CSS, SCSS, Tailwind, HTML or React. Every effect keeps the text readable when animation is off and falls back to a solid color in older browsers.

Preset gallery

Make it shine

Accessibility checks

  • Fail The weakest part of the text has only 2.1:1 contrast with the background. Choose colors that stand out more.
  • Check This animation keeps running. If it lasts longer than 5 seconds next to content, give people a way to pause it (WCAG 2.2.2), or use it sparingly.
  • Pass A prefers-reduced-motion block stops all animation, and the text shows in its finished state.

Export code

/* Designed for a #FFFFFF background. */
.text-fx {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(43px, 8vw, 96px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #111827;
  color: #6366F1;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .text-fx {
    background: linear-gradient(90deg, #6366F1, #EC4899, #F59E0B, #6366F1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    animation: text-fx-shift 6s linear infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .text-fx,
  .text-fx *,
  .text-fx::before,
  .text-fx::after {
    animation: none !important;
  }
}

@keyframes text-fx-shift {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 200% 50%;
  }
}
Favourites on this device (0)

No favourites yet.

Effect & text
Typography
Colors
Main color
Second color
Third color
Background it sits on
Motion & depth

How to use the CSS text effects generator

  1. Pick a preset from the gallery. Filter by effect family, then select Customize.
  2. Type your text and choose a style for the effect, for example Flicker for neon or Wipe for a reveal.
  3. Set the typography: font, maximum size, weight, letter spacing and uppercase. The fonts are built into every operating system, so nothing has to download.
  4. Pick colors, including the background the text will sit on, so the preview and contrast check match your page.
  5. Adjust motion and depth. Speed controls animations; depth/glow controls shadow length, glow size and 3D extrusion.
  6. Use the playback bar to replay intros, slow them down or freeze a frame.
  7. Review the checks and export CSS, CSS variables, SCSS, Tailwind, HTML or React.

How the effects work

  • Gradient text paints a gradient as the background, then clips it to the letters with background-clip: text.
  • Outline uses -webkit-text-stroke with a transparent fill. The offset style adds a solid text-shadow behind it.
  • Long shadow and 3D stack many 1px text-shadow layers along a direction, darkening each step for depth.
  • Neon layers white and colored glows of increasing blur.
  • Glitch draws two copies of the text with ::before and ::after, then shows random slices of them in steps.
  • Typewriter animates width with steps() and adds a blinking caret.
  • Reveal and highlighter animate from a hidden starting frame to the normal style.
  • Marquee duplicates the text and slides the pair by exactly half its width for a seamless loop.

Worked examples

Example 1: a landing-page headline

Load Gradient text · Animated · Candy, type your headline and set the size to 88px. The gradient drifts slowly; lower the speed to 0.5× for a calmer feel.

Example 2: a retro event poster

Load 3D text · Retro · Retro with the condensed display font and uppercase. The two offset layers give a printed, screen-print look without images.

Example 3: a terminal-style hero

Load Typewriter · Loops · Night and change the text to your command. It types, pauses and deletes in a loop. For a one-time effect, choose Types once.

Tips and common mistakes

  • Effects on body text. Glows, outlines and long shadows reduce legibility. Keep them for short headings.
  • Low-contrast gradients. A gradient is only as readable as its lightest color on your background.
  • Endless motion. Looping effects draw attention away from everything else. Use them once per page at most.
  • Fixed pixel sizes. Use the exported clamp() so big headings fit on phones.

Frequently asked questions

Is gradient or outline text accessible?

The text stays real, selectable text that screen readers announce normally. The export sets a solid color first and only switches to the gradient or stroke inside @supports, so browsers without support still show readable text. Check the contrast of the weakest color against your background; the studio does this for you.

Won't screen readers read glitch text twice?

The glitch layers are pseudo-elements that copy the text from a data attribute. The export uses content: attr(data-text) / "", which gives them empty alternative text, so supporting screen readers ignore them. Browsers that don't support that syntax use the plain declaration before it.

How does the typewriter know how far to type?

It animates the width from 0 to the number of characters in ch units with steps(), one step per character. That's exact in a monospace font, so the typewriter always uses one.

What happens with reduced motion?

Every export includes a prefers-reduced-motion block that stops animations. Intro effects are built so the finished state is the normal style, so the text simply appears fully revealed.

Do marquees meet accessibility guidelines?

The marquee pauses on hover and keyboard focus and stops completely for reduced-motion users. Moving content that lasts more than five seconds should also have a visible pause control (WCAG 2.2.2), so add one if the marquee carries important information.

Why does the size use clamp()?

Large display text needs to shrink on small screens. clamp(min, preferred, max) scales the size with the viewport width between a minimum and your chosen maximum, so headings never overflow a phone screen.

Sources