CSS Text Shadow Examples: 10 Effects With Copy-Paste Code

Quick answer: CSS text-shadow takes 4 values: text-shadow: offset-x offset-y blur-radius color. Stack multiple shadows with commas for complex effects. A neon glow is text-shadow: 0 0 10px #0ff, 0 0 40px #0ff. An emboss is text-shadow: 1px 1px 0 rgba(255,255,255,0.3), -1px -1px 0 rgba(0,0,0,0.3). Here are 10 effects with the CSS ready to paste.

I spent an embarrassing amount of time early in my career trying to create text effects with images and SVG filters. Then I discovered you can get 90% of the same results with a single CSS property and zero extra DOM elements. text-shadow is one of the most underused properties in CSS --- most developers know it exists but only ever use it for a basic drop shadow.

Here's the syntax breakdown, followed by 10 effects you can copy into your project right now.

Text-Shadow Syntax Breakdown

The text-shadow property accepts one or more shadow definitions, separated by commas. Each shadow takes up to four values:

Value	Required?	What It Does	Default	Example Values
offset-x	Yes	Horizontal distance from text	---	2px, -1px, 0
offset-y	Yes	Vertical distance from text	---	2px, -1px, 0
blur-radius	No	How much the shadow spreads/blurs	0 (sharp edge)	4px, 10px, 20px
color	No	Shadow color	Inherited from color	#000, rgba(0,0,0,0.5), red

/* Single shadow */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

/* Multiple shadows (stacked) */
text-shadow:
  0 0 10px #0ff,
  0 0 20px #0ff,
  0 0 40px #0ff;

/* No shadow */
text-shadow: none;

Key behaviors to know:

• Negative offsets move the shadow left (offset-x) or up (offset-y). This is how you create emboss and inset effects.
• Zero blur creates a sharp, solid copy of the text. This is the basis for 3D/extruded effects where you stack multiple sharp shadows at incrementing offsets.
• Multiple shadows render in order: the first shadow in the list is on top, the last is on the bottom. Layer order matters for complex effects.
• The color defaults to the element's color value if you omit it. This is useful --- change the text color and the shadow automatically matches.

The text shadow generator lets you visually adjust all four values with a live preview and gives you the CSS output.

Effect 1: Neon Glow

The most popular text-shadow effect. Three layered shadows at different blur radii create a convincing neon tube look. Works best on dark backgrounds with a bright text color.

.neon-blue {
  color: #0ff;
  text-shadow:
    0 0 7px #0ff,
    0 0 10px #0ff,
    0 0 21px #0ff,
    0 0 42px #0088ff,
    0 0 82px #0088ff,
    0 0 92px #0088ff;
  font-family: 'Courier New', monospace;
  font-weight: bold;
}

.neon-pink {
  color: #ff6ec7;
  text-shadow:
    0 0 7px #ff6ec7,
    0 0 10px #ff6ec7,
    0 0 21px #ff6ec7,
    0 0 42px #ff1493,
    0 0 82px #ff1493;
  font-weight: bold;
}

The trick is using two colors: a bright core color matching the text (#0ff) for the tight inner glow, and a slightly darker shade (#0088ff) for the wide outer glow. This mimics how real neon tubes have a bright center and a diffused color spill.

The blur values roughly double with each layer (7, 10, 21, 42, 82). This creates a smooth falloff from bright center to soft edge. If all layers had the same blur radius, the glow would look flat and artificial.

For animated neon (flickering or pulsing), wrap the text-shadow in a CSS animation with @keyframes that oscillates the blur values by 20-30%. A real neon sign flickers at irregular intervals, so use animation-timing-function: steps() for authenticity rather than smooth easing.

Effect 2: Retro 3D / Extruded Text

A solid offset shadow that creates a depth/extrusion effect. Popular in 80s/90s retro design and gaming UIs.

.retro-3d {
  color: #ff6b35;
  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 rgba(0, 0, 0, 0.2);
  font-weight: 900;
  letter-spacing: 2px;
}

Each shadow is offset by 1px more than the previous, with zero blur. This stacks sharp copies of the text diagonally, creating an extruded 3D appearance. The last shadow at 6px 6px with rgba(0,0,0,0.2) is a soft "ground shadow" that adds depth.

The extrusion color (#c0392b) should be a darker shade of the text color (#ff6b35). If the colors are unrelated, the effect looks disconnected rather than like a 3D surface. I use HSL and reduce the lightness by 20-30% for the shadow color.

You can go deeper than 6 levels, but GPU cost increases linearly. On a heading with 10+ stacked shadows, lower-end mobile devices may show rendering lag during scroll. Keep it under 8 layers for production.

Effect 3: Emboss / Letterpress

Simulates pressed-into-the-surface text using opposing light and dark shadows. Works on mid-tone backgrounds.

.emboss {
  color: #7c8a96;
  text-shadow:
    1px 1px 1px rgba(255, 255, 255, 0.4),
    -1px -1px 1px rgba(0, 0, 0, 0.3);
  font-weight: 700;
}

/* On dark background */
.emboss-dark {
  color: #2d3436;
  text-shadow:
    1px 1px 1px rgba(255, 255, 255, 0.08),
    -1px -1px 1px rgba(0, 0, 0, 0.5);
  font-weight: 700;
}

The technique: a white shadow offset down-right (simulating light from top-left) and a dark shadow offset up-left (simulating the shadow on the opposite edge). Together they create the illusion that the text is recessed into the surface.

The text color should be close to the background color --- the emboss is a subtle depth cue, not a color contrast effect. If the text color is too different from the background, it looks like regular text with a weird shadow instead of embossed text.

This effect is fragile at small font sizes. Below 14px, the 1px offset becomes indistinguishable from a rendering artifact. Use emboss on headings (20px+) and large display text.

Effect 4: Fire / Flame Text

Layered warm-toned shadows transitioning from white (center) through yellow and orange to red (edge). Best on dark backgrounds at large font sizes.

.fire {
  color: #fff;
  text-shadow:
    0 0 4px #fff,
    0 -2px 6px #ff0,
    0 -4px 10px #ff8000,
    0 -6px 15px #ff0000,
    0 -8px 20px #ff0000;
  font-weight: 900;
  font-size: 3rem;
  text-transform: uppercase;
}

The shadows go upward (negative offset-y) because fire rises. The color gradient follows the physical spectrum of a candle flame: white core, yellow inner, orange middle, red outer. The blur increases with each layer (4, 6, 10, 15, 20) to simulate the diffusion of light from the flame.

text-transform: uppercase and heavy font-weight are important for this effect. Thin lowercase text doesn't have enough surface area for the flame layers to look convincing. Bold uppercase letters act like "fuel" for the visual fire.

For animated fire, use a CSS animation that randomly varies the offset-y values by 1-3px per layer. Fire doesn't rise uniformly --- the flicker is what sells the effect. @keyframes with 3-4 keyframes and animation-duration: 0.1s creates a convincing flicker at 10fps.

Effect 5: Long Shadow (Flat Design)

A staple of flat/material design. A single shadow extends diagonally for 20-50 pixels, creating a dramatic "long shadow" typically seen on icon text and logos.

.long-shadow {
  color: #fff;
  text-shadow:
    1px 1px 0 rgba(0,0,0,0.1),
    2px 2px 0 rgba(0,0,0,0.1),
    3px 3px 0 rgba(0,0,0,0.1),
    4px 4px 0 rgba(0,0,0,0.1),
    5px 5px 0 rgba(0,0,0,0.1),
    6px 6px 0 rgba(0,0,0,0.09),
    7px 7px 0 rgba(0,0,0,0.09),
    8px 8px 0 rgba(0,0,0,0.08),
    9px 9px 0 rgba(0,0,0,0.08),
    10px 10px 0 rgba(0,0,0,0.07),
    12px 12px 0 rgba(0,0,0,0.06),
    14px 14px 0 rgba(0,0,0,0.05),
    16px 16px 0 rgba(0,0,0,0.04),
    18px 18px 0 rgba(0,0,0,0.03),
    20px 20px 0 rgba(0,0,0,0.02);
  font-size: 4rem;
  font-weight: 900;
}

The decreasing opacity creates a fade-out effect. At the near end, the shadow is 10% black; at the far end, 2%. This prevents the shadow from having a hard edge at its terminus, which looks artificial. In flat design, the shadow "disappears" into the background.

This CSS is verbose. For long shadows (30px+), generate the shadow values programmatically with a CSS preprocessor (Sass @for loop) or JavaScript. Writing 30 shadow layers by hand is tedious and error-prone. The text shadow generator can generate long shadow code with configurable length and fade.

Long shadows work best on solid-color backgrounds. On gradients or images, the semi-transparent shadow picks up different background colors along its length, which can look muddy.

Effect 6: Outline / Stroke Text

Pure CSS text outline using shadows at all four cardinal directions. Useful when you need text over variable-color backgrounds (photos, gradients) and can't rely on a single shadow for contrast.

.text-outline {
  color: #fff;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
  font-weight: 700;
}

/* Thicker outline (2px) */
.text-outline-thick {
  color: #fff;
  text-shadow:
    -2px -2px 0 #000,
     0px -2px 0 #000,
     2px -2px 0 #000,
    -2px  0px 0 #000,
     2px  0px 0 #000,
    -2px  2px 0 #000,
     0px  2px 0 #000,
     2px  2px 0 #000;
  font-weight: 700;
}

The 1px version uses 4 shadows (diagonal corners). The 2px version uses 8 shadows (corners + cardinal directions) to fill the gaps. Without the cardinal-direction shadows, the 2px outline has visible holes at 0/90/180/270 degrees.

This technique is a workaround for browsers that don't fully support -webkit-text-stroke. The text-shadow approach works everywhere, while -webkit-text-stroke still has rendering inconsistencies in Firefox as of 2026. The tradeoff: text-shadow outlines are less smooth than -webkit-text-stroke on curves, especially at small sizes.

For large display text (40px+), the rendering differences are invisible. For body text, neither method is great --- outlined body text is harder to read than solid text with a solid background.

Effect 7: Double Shadow (Depth)

Two offset shadows at different distances and colors. Creates a layered depth effect that's more subtle than full 3D extrusion but more interesting than a single drop shadow.

.double-shadow {
  color: #2d3436;
  text-shadow:
    3px 3px 0 #74b9ff,
    6px 6px 0 #0984e3;
  font-weight: 800;
  font-size: 2.5rem;
}

.double-shadow-warm {
  color: #2d3436;
  text-shadow:
    3px 3px 0 #ffeaa7,
    6px 6px 0 #fdcb6e;
  font-weight: 800;
  font-size: 2.5rem;
}

The two-color shadow pair should be the same hue at different lightness values. The closer shadow (3px) is lighter, the farther shadow (6px) is darker. This follows natural light falloff --- surfaces closer to the object catch more light.

This effect works for logos, hero text, and section headings. It pairs well with bold, geometric sans-serif fonts (Inter, Poppins, Montserrat). On serif fonts, the shadow layers compete with the serif details and look cluttered.

Effect 8: Vintage / Worn Text

A rough, worn-out appearance using multiple misaligned semi-transparent shadows. Simulates ink bleeding or aged print.

.vintage {
  color: #4a3728;
  text-shadow:
    1px 0 0 rgba(74, 55, 40, 0.3),
    0 1px 0 rgba(74, 55, 40, 0.2),
    2px 1px 0 rgba(74, 55, 40, 0.15),
    -1px 0 0 rgba(74, 55, 40, 0.1);
  font-family: Georgia, 'Times New Roman', serif;
  letter-spacing: 1px;
}

The shadows are slight misalignments (1-2px) in different directions with low opacity. Real letterpress printing produces exactly this: the metal type doesn't hit the paper perfectly uniformly, creating slightly thicker edges on random sides of each letter.

Pair this with a serif font and warm brown/cream colors. Modern sans-serifs with a vintage shadow look like a styling mistake, not an intentional aesthetic.

Effect 9: Glitch / Chromatic Aberration

Offset shadows in cyan and magenta (or red and blue) simulate chromatic aberration from camera lenses or digital glitch effects.

.glitch {
  color: #fff;
  text-shadow:
    2px 0 #ff0000,
    -2px 0 #00ffff;
  animation: glitch-shift 0.3s infinite alternate;
  font-weight: 900;
  font-family: monospace;
  text-transform: uppercase;
}

@keyframes glitch-shift {
  0% {
    text-shadow: 2px 0 #ff0000, -2px 0 #00ffff;
  }
  25% {
    text-shadow: -2px 0 #ff0000, 2px 0 #00ffff;
  }
  50% {
    text-shadow: 2px -1px #ff0000, -2px 1px #00ffff;
  }
  75% {
    text-shadow: -1px 2px #ff0000, 1px -2px #00ffff;
  }
  100% {
    text-shadow: 1px 1px #ff0000, -1px -1px #00ffff;
  }
}

Red (#ff0000) and cyan (#00ffff) are complementary colors that together with white form a rough RGB color model. The offset between them creates the chromatic aberration that real camera lenses produce when light wavelengths focus at different points.

The animation makes each color channel shift independently per frame, simulating a VHS tracking error. animation-duration: 0.3s gives fast, chaotic movement. Slower durations (1s+) look like smooth drifting, which reads as "broken" rather than "intentionally glitchy."

Wrap the animation in @media (prefers-reduced-motion: no-preference) --- rapid flickering effects can trigger photosensitive seizures. Without the media query, the static version (just the offset shadows, no animation) still reads as glitch text.

Effect 10: Soft Ambient Light

A gentle, diffused glow that makes text feel like it's softly lit from behind. More subtle than neon, suitable for elegant UIs and landing pages.

.ambient {
  color: #e0e0e0;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.35);
  font-weight: 300;
  font-size: 2.5rem;
  letter-spacing: 4px;
}

.ambient-warm {
  color: #f5e6d3;
  text-shadow: 0 0 15px rgba(255, 200, 150, 0.3);
  font-weight: 300;
  font-size: 2.5rem;
  letter-spacing: 4px;
}

One shadow, zero offset, high blur. The single-layer approach prevents the "nuclear glow" look that multi-layer neon creates. The color is warm or neutral, and the opacity is low (0.3-0.35). Combined with light font weight (300) and wide letter spacing, it creates an elegant, editorial feel.

This is the hardest effect to get right because subtlety is the point. Too much blur and the text looks out of focus. Too much opacity and it becomes neon. The sweet spot is a blur radius roughly equal to the font size (20px blur on 2.5rem/40px text) and opacity between 0.2 and 0.4.

Performance and Browser Support

text-shadow has universal browser support --- it works in every browser released since 2011, including IE10+. No prefixes needed. Performance is generally excellent, with some caveats:

Shadow Complexity	Performance Impact	Safe For
1-3 shadows	Negligible	Any element, any quantity
4-6 shadows	Low	Headings, limited count (< 20 elements on page)
7-10 shadows	Moderate	Large display text only, < 5 elements on page
10+ shadows	High	Single hero element, avoid on scroll
Animated shadows	Moderate to High	1-3 animated elements max

Each shadow layer requires the browser to render a separate blurred copy of the text and composite them. At 6+ layers on dozens of elements, the GPU cost becomes measurable. I profiled a page with 30 headings each using the 6-layer neon effect --- it added 8ms to the paint time on a mid-range Android phone, pushing frame times above the 16ms budget for 60fps.

Rule of thumb: complex effects (5+ shadows) for hero text and headings. Simple effects (1-2 shadows) for body text and repeated elements.

Experiment with all of these effects interactively using the text shadow generator --- adjust values in real time and copy the CSS when you're happy with the result.

FAQ

Can text-shadow be animated with CSS transitions?

Yes. text-shadow is an animatable property. You can transition between shadow states on hover, focus, or any state change: transition: text-shadow 0.3s ease. The browser interpolates between shadow values smoothly. One caveat: you can't transition between different numbers of shadows. If the initial state has 3 shadows and the hover state has 6, the transition jumps instead of animating. Keep the same number of shadow layers in both states and vary the values (offset, blur, color).

How is text-shadow different from -webkit-text-stroke?

They solve different problems. text-shadow adds shadows behind the text --- the text itself stays the same shape. -webkit-text-stroke modifies the text outline itself, shrinking the fill area. For outline effects, -webkit-text-stroke: 2px black is cleaner than 4-8 shadow layers, but it has inconsistent rendering across browsers. text-shadow is universally supported and predictable. For glow, 3D, and all non-outline effects, text-shadow is the only option.

Does text-shadow affect the element's box size?

No. Shadows don't affect layout. A text-shadow: 20px 20px 20px overflows its container but doesn't change the element's width, height, padding, or margin. Surrounding elements won't reflow. If the shadow extends beyond the container, it gets clipped if the container has overflow: hidden. Plan your padding to accommodate large shadows, or they'll be cut off.

Can I apply text-shadow to individual characters?

Not directly with text-shadow --- it applies to all text within the element uniformly. To shadow individual characters, wrap each character in a <span> and style them separately. For alternating shadow effects (every other letter has a different shadow), use nth-child selectors on span-wrapped characters. This is verbose markup, so reserve it for short headings and logos, not paragraphs.

Next Steps

• Build and preview text shadow effects with the text shadow generator --- visual controls for all four values with live preview.
• Combine text effects with frosted glass UI using the glassmorphism generator --- neon text on glass cards is a popular pairing.
• For shadow-related responsive sizing, convert your px values to rem with the CSS unit converter.