The range of text effects achievable in pure CSS has expanded dramatically in recent years. Here's a comprehensive overview of what's fully possible in 2026 — no JavaScript, no canvas, no image sprites:

Core CSS Text Effect Categories

• Text shadows — single, multiple, coloured, layered, directional
• Gradient text — linear, radial, conic gradients applied to text fill
• Glow effects — neon glow, soft bloom, hard edge glow
• 3D effects — embossed, engraved, extrusion, perspective
• Stroke effects — text outline without fill, variable stroke width
• Blend modes — mix-blend-mode on text for overlay effects
• CSS animations — typewriter, fade, shimmer, glitch, wave
• Variable fonts — animating font-weight, font-width, optical size via CSS transitions
• text-decoration — wavy, dashed, double underlines with custom colours and thickness
• Clip paths on text containers — text masked to shapes

What Still Requires SVG or JavaScript?

• Per-character animations (animating individual letters in a word independently) — requires JavaScript to wrap each character in a span
• Complex path-following text — text flowing along a curved path (SVG textPath)
• Truly random variations per character — requires JS
• Variable font axis animation with full browser support — still patchy without JS orchestration

Performance Baseline

CSS text effects are generally very performant because the browser's rendering engine handles them natively. However, some effects (particularly animated text shadows and multiple layered shadows) can trigger repaints or bypass GPU compositing. The performance section at the end of this guide covers exactly which effects to use and which to avoid in performance-critical contexts.

The text-shadow property is the foundational CSS text effect — simple to understand, but deceptively powerful when used creatively. Here's everything you need to know:

Syntax

text-shadow: offset-x offset-y blur-radius color;

You can chain multiple shadows by comma-separating them. The first shadow in the list renders on top.

10 Production-Ready Text Shadow Examples

1. Subtle readability shadow (for body text on complex backgrounds)

.text-readable {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

2. Classic drop shadow

.text-drop-shadow {
  text-shadow: 2px 4px 6px rgba(0, 0, 0, 0.5);
}

3. Long flat shadow (material design style)

.text-long-shadow {
  text-shadow:
    1px 1px 0 #c0392b,
    2px 2px 0 #c0392b,
    3px 3px 0 #c0392b,
    4px 4px 0 #c0392b,
    5px 5px 0 #c0392b,
    6px 6px 0 #c0392b,
    7px 7px 0 #c0392b,
    8px 8px 15px rgba(0, 0, 0, 0.3);
}

4. Retro text (80s poster style)

.text-retro {
  color: #fff;
  text-shadow:
    3px 3px 0 #ff006e,
    6px 6px 0 #8338ec,
    9px 9px 0 #3a86ff;
}

5. Embossed / raised effect (light source top-left)

.text-embossed {
  color: #c8c8c8;
  background: #cccccc;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow:
    -1px -1px 1px rgba(255, 255, 255, 0.9),
    1px 1px 1px rgba(0, 0, 0, 0.25);
}

6. Engraved / pressed effect (light source top-left)

.text-engraved {
  color: #929292;
  text-shadow:
    1px 1px 2px rgba(255, 255, 255, 0.7),
    -1px -1px 2px rgba(0, 0, 0, 0.5);
}

7. Neon glow (cyan on dark)

.text-neon-cyan {
  color: #fff;
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #0ff,
    0 0 82px #0ff,
    0 0 92px #0ff,
    0 0 102px #0ff,
    0 0 151px #0ff;
}

8. Outline text (text stroke via shadow)

.text-outline {
  color: transparent;
  text-shadow:
    -1px -1px 0 #333,
    1px -1px 0 #333,
    -1px 1px 0 #333,
    1px 1px 0 #333;
}

9. Glitch effect (static version)

.text-glitch {
  color: #fff;
  text-shadow:
    2px 0 #ff003c,
    -2px 0 #00ffe1;
}

10. Fire effect (multi-shadow warm glow)

.text-fire {
  color: #fff;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 30px #ff7700,
    0 0 40px #ff7700,
    0 0 55px #ff7700,
    0 0 75px #ff7700;
}

Gradient-filled text is one of the most visually striking effects in modern web design. It's achieved using a combination of background, -webkit-background-clip, and color: transparent. Here's exactly how it works and how to use it:

How It Works

CSS doesn't have a direct "gradient text colour" property. Instead, the technique works by:

1. Applying a gradient as the element's background
2. Clipping that background to the shape of the text characters (using background-clip: text)
3. Making the text colour transparent so the background gradient shows through

Basic Gradient Text

.gradient-text-basic {
  background: linear-gradient(90deg, #f093fb, #f5576c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent; /* Fallback for non-webkit browsers */
}

Diagonal Gradient

.gradient-text-diagonal {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Rainbow / Multi-stop Gradient

.gradient-text-rainbow {
  background: linear-gradient(
    90deg,
    #ff0000 0%,
    #ff7700 16.6%,
    #ffff00 33.3%,
    #00ff00 50%,
    #0000ff 66.6%,
    #8b00ff 83.3%,
    #ff0000 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Radial Gradient (centre burst)

.gradient-text-radial {
  background: radial-gradient(circle at 30% 50%, #feac5e, #c779d0, #4bc0c8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Animated Gradient Text (gradient moves on hover)

.gradient-text-animated {
  background: linear-gradient(90deg, #f093fb, #f5576c, #4facfe, #00f2fe);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: background-position 0.5s ease;
}

.gradient-text-animated:hover {
  background-position: 100% 50%;
}

Continuously Animating Gradient Text

.gradient-text-loop {
  background: linear-gradient(90deg, #f093fb, #f5576c, #4facfe, #00f2fe, #f093fb);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 4s ease infinite;
}

@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Known Limitations

• text-shadow does not work on gradient text — the shadow applies to the bounding box, not the character shapes
• The gradient scales relative to the element's bounding box, not the text itself — very short text elements can look odd
• Adding background-clip: text to an element prevents its background from showing through in other contexts — be mindful of z-index stacking

Here are complete, production-ready CSS implementations for the three most requested decorative text effects — neon glow, embossed, and 3D extrusion:

Neon Glow Effect

Neon glow uses multiple layered text-shadows with increasing blur radii, creating the characteristic "bloom" of a neon tube. For best results, use this on dark backgrounds with pure or near-pure white text:

/* Neon Green — classic terminal / hacker aesthetic */
.neon-green {
  color: #fff;
  font-family: 'Courier New', monospace;
  text-shadow:
    0 0 4px #fff,
    0 0 8px #fff,
    0 0 12px #0fa,
    0 0 20px #0fa,
    0 0 40px #0fa,
    0 0 60px #0fa;
}

/* Neon Pink — nightlife / synthwave aesthetic */
.neon-pink {
  color: #fff;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #ff00de,
    0 0 40px #ff00de,
    0 0 80px #ff00de;
}

/* Neon Blue — cool tech aesthetic */
.neon-blue {
  color: #e0f7ff;
  text-shadow:
    0 0 6px #e0f7ff,
    0 0 12px #00d4ff,
    0 0 25px #00d4ff,
    0 0 50px #00d4ff,
    0 0 100px #00d4ff;
}

/* Flickering neon — simulates a faulty neon tube */
.neon-flicker {
  color: #fff;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #ff00de,
    0 0 40px #ff00de;
  animation: flicker 3s infinite;
}

@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow:
      0 0 5px #fff,
      0 0 10px #fff,
      0 0 20px #ff00de,
      0 0 40px #ff00de;
  }
  20%, 24%, 55% {
    text-shadow: none;
  }
}

Embossed Text Effect

Embossed text uses carefully placed light and dark shadows to simulate a raised surface with a directional light source. Works best on a background matching or near-matching the text colour:

/* Embossed — light source from top-left */
.text-emboss {
  color: #888;
  background-color: #999;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    -1px -1px 1px rgba(255, 255, 255, 0.8),
    1px 1px 2px rgba(0, 0, 0, 0.4);
  font-weight: 900;
  font-size: 4rem;
}

/* Debossed / engraved — pressed INTO the surface */
.text-deboss {
  color: #aaa;
  background-color: #aaaaaa;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    1px 1px 1px rgba(255, 255, 255, 0.7),
    -1px -1px 1px rgba(0, 0, 0, 0.4);
  font-weight: 900;
}

3D Extruded Text Effect

True 3D extrusion in CSS uses multiple successive text-shadows offset diagonally, creating the visual impression of depth and perspective:

/* 3D Extrusion — dark extrusion direction (bottom-right) */
.text-3d {
  color: #fff;
  font-weight: 900;
  font-size: 5rem;
  text-shadow:
    1px 1px 0 #ccc,
    2px 2px 0 #c9c9c9,
    3px 3px 0 #bbb,
    4px 4px 0 #b9b9b9,
    5px 5px 0 #aaa,
    6px 6px 1px rgba(0,0,0,.1),
    0 0 5px rgba(0,0,0,.1),
    0 3px 15px rgba(0,0,0,.5),
    3px 4px 6px rgba(0,0,0,.3),
    12px 12px 10px rgba(0,0,0,.15);
}

/* 3D Coloured extrusion — great for headings */
.text-3d-colour {
  color: #fff200;
  font-weight: 900;
  text-shadow:
    0px 1px 0px #c0a800,
    0px 2px 0px #b09800,
    0px 3px 0px #a08800,
    0px 4px 0px #907800,
    0px 5px 0px #806800,
    0px 6px 0px #705800,
    0px 7px 0px #604800,
    0px 8px 7px rgba(0,0,0,0.4),
    0px 9px 15px rgba(0,0,0,0.2);
}

CSS animations applied to text can transform a static heading into an engaging, dynamic experience. Here are complete implementations of the most useful and widely-requested text animations:

Typewriter Effect

The typewriter effect uses the steps() timing function with a width animation and an overflow: hidden clip. It requires a monospace font for accurate character-count stepping:

.typewriter {
  font-family: 'Courier New', Courier, monospace;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  border-right: 3px solid #333; /* Cursor */
  animation:
    typing 3.5s steps(30, end) forwards,
    blink-cursor 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes blink-cursor {
  from, to { border-color: transparent; }
  50%      { border-color: #333; }
}

/* Note: the steps() count should match your character count.
   For "Hello, World!" (13 chars), use steps(13, end) */

Fade-In Text (Word by Word)

.fade-in-text {
  opacity: 0;
  animation: fadeIn 1.5s ease-in-out forwards;
}

/* Stagger each word using animation-delay on child spans */
.fade-in-text span:nth-child(1) { animation-delay: 0s; }
.fade-in-text span:nth-child(2) { animation-delay: 0.3s; }
.fade-in-text span:nth-child(3) { animation-delay: 0.6s; }
.fade-in-text span:nth-child(4) { animation-delay: 0.9s; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

Shimmer / Shine Effect

A moving shimmer effect that gives text a metallic or light-catching quality:

.text-shimmer {
  background: linear-gradient(
    90deg,
    #e0e0e0 25%,
    #fff 50%,
    #e0e0e0 75%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 2s linear infinite;
}

@keyframes shimmer {
  to { background-position: -200% center; }
}

/* Gold shimmer variant */
.text-shimmer-gold {
  background: linear-gradient(
    90deg,
    #b8860b 25%,
    #ffd700 50%,
    #b8860b 75%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 2.5s linear infinite;
}

Wave Text Animation

Requires wrapping each character in a <span> (via JavaScript or manually for short text):

/* Apply to individual letter spans */
.wave-letter {
  display: inline-block;
  animation: wave 1.5s ease-in-out infinite;
}

.wave-letter:nth-child(1)  { animation-delay: 0.0s; }
.wave-letter:nth-child(2)  { animation-delay: 0.1s; }
.wave-letter:nth-child(3)  { animation-delay: 0.2s; }
.wave-letter:nth-child(4)  { animation-delay: 0.3s; }
.wave-letter:nth-child(5)  { animation-delay: 0.4s; }

@keyframes wave {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

Glitch Animation Effect

.text-glitch-anim {
  position: relative;
  color: #fff;
}

.text-glitch-anim::before,
.text-glitch-anim::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.text-glitch-anim::before {
  color: #ff003c;
  animation: glitch-1 0.5s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}

.text-glitch-anim::after {
  color: #00ffe1;
  animation: glitch-2 0.5s infinite;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
}

@keyframes glitch-1 {
  0%   { transform: translate(0); }
  20%  { transform: translate(-2px, 2px); }
  40%  { transform: translate(-2px, -2px); }
  60%  { transform: translate(2px, 2px); }
  80%  { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

@keyframes glitch-2 {
  0%   { transform: translate(0); }
  20%  { transform: translate(2px, -2px); }
  40%  { transform: translate(2px, 2px); }
  60%  { transform: translate(-2px, -2px); }
  80%  { transform: translate(-2px, 2px); }
  100% { transform: translate(0); }
}

/* HTML usage: 
GLITCH
 */

Browser support for CSS text effects is very strong in 2026, but there are still important distinctions to know, especially if you need to support older browser versions or unconventional environments.

Full Cross-Browser Support (No Vendor Prefixes Required)

Effects Requiring -webkit- Prefix for Safari

CSS text-stroke

Text stroke (outline only, no fill) is a genuinely useful effect that still requires the -webkit- prefix:

/* Text outline only (no fill) */
.text-stroke-only {
  -webkit-text-stroke: 2px #333;
  text-stroke: 2px #333; /* future standard */
  color: transparent;
}

/* Text with both stroke and fill */
.text-stroke-filled {
  -webkit-text-stroke: 1px #ff6b6b;
  color: #fff;
}

Fallback Strategy

Always provide a sensible fallback for effects that might fail:

/* Gradient text with fallback */
.gradient-text-safe {
  color: #7c3aed; /* Fallback solid colour for unsupported browsers */
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .gradient-text-safe {
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
  }
}

CSS text effects are a double-edged sword when it comes to performance. Most are GPU-accelerated and have zero impact on your Core Web Vitals. But a handful of poorly-applied effects can cause layout shifts, forced repaints, and dropped frames that hurt your LCP, CLS, and INP scores. Here's the definitive guide:

Effects That Are Performance-Safe (GPU Composited)

• Static text-shadow — rendered once at paint time; no ongoing performance cost
• Gradient text (background-clip) — composited once; safe for any text element
• CSS opacity animations — always GPU composited; zero layout impact
• CSS transform animations (translate, scale, rotate) — GPU composited; the right way to move text
• Colour transitions — efficient in modern browsers

Effects That Can Cause Performance Issues

Core Web Vitals Impact

• LCP (Largest Contentful Paint) — CSS text effects do not delay LCP since they're applied at paint time, after the DOM is ready. Exception: web fonts referenced in effects that aren't preloaded can delay LCP.
• CLS (Cumulative Layout Shift) — CSS text effects themselves don't cause CLS. However, if you animate font-size or letter-spacing during page load before the element settles, this can contribute to CLS.
• INP (Interaction to Next Paint) — Avoid running intensive text-shadow animations on scroll or on interaction events. Use animation-play-state: paused and trigger via JavaScript only when the element is in the viewport.

Best Practice: will-change and contain

/* Use will-change sparingly — only where animation is frequent and complex */
.animated-neon {
  will-change: text-shadow; /* Hints browser to prepare GPU layer */
  contain: layout style; /* Isolates the element from layout calculations */
  animation: neonPulse 2s ease-in-out infinite;
}

/* Remove will-change after animation completes to free GPU memory */
.animation-complete {
  will-change: auto;
}

@keyframes neonPulse {
  0%, 100% {
    text-shadow:
      0 0 5px #fff,
      0 0 15px #0ff,
      0 0 30px #0ff;
  }
  50% {
    text-shadow:
      0 0 10px #fff,
      0 0 25px #0ff,
      0 0 50px #0ff;
  }
}

Using ToolsArena's CSS Text Effects Generator

ToolsArena's generator provides performance-conscious presets for every effect — each one uses the minimum number of shadow layers needed for visual impact, applies will-change only where genuinely needed, and includes browser compatibility declarations automatically. Copy the generated code directly into your CSS file — it's production-ready.