Top 15 CSS Text Shadow Effects

3D CARTOON TEXT WITH CSS TEXT-SHADOW

Playing around with CSS text-shadow and the Google Font “Luckiest Guy”.

See the Pen 3D Cartoon Text w/CSS text-shadow by Fielding Johnston (@fielding) on CodePen.

SCSS 3D TEXT MIXIN

This is a simple SCSS mixin that creates 3D blocky looking text with text-shadows.

See the Pen SCSS 3D text mixin by Liam Egan (@shubniggurath) on CodePen.

ANIMATED TEXT-SHADOW

A fun, CSS animation that creates a bounce while mimicking an RGB separation during the process.

See the Pen Animated Text-Shadow by Erin E. Sullivan (@erinesullivan) on CodePen.

DIRECTION-AWARE TEXT-SHADOW

Direction-aware text-shadow, use of CSS variables to create perspective and 3D light effect on text.

See the Pen Direction-aware text-shadow by Martin Picod (@mpicod) on CodePen.

GROOVY CSS EFFECT

1960’s font effect using CSS text-shadow property along with SASS function and mixins to keep code DRY.

See the Pen Groovy CSS Effect by Daniel Gonzalez (@dan10gc) on CodePen.

See the Pen Netflix style text animation with CSS by Nooray Yemon (@yemon) on CodePen.

FANCY TEXT SHADOW

See the Pen Fancy text shadow by agathaco (@agathaco) on CodePen.

CSS TEXT-SHADOW

Modern shadow effect for text with CSS text-shadow.

See the Pen text-shadow by IMarty (@IMarty) on CodePen.

PRETTY SHADOW

Pretty text shadow.

See the Pen Pretty shadow by Alex Moore (@MoorLex) on CodePen.

VARIABLE LONGSHADOW WITH GRADIENTS MIXIN

This doesn’t need to exist. But now you can define long shadows with different colors and spreads with one Sass mixin.

See the Pen Variable Longshadow with Gradients Mixin by Dario Corsi (@dariocorsi) on CodePen.

NEON EFFECTS

Neon text-shadow effects.

See the Pen Neon text-shadow effect by Erik Jung (@erikjung) on CodePen.

AWESOME TEXT-SHADOW

Flat and simple text shadow effect.

See the Pen Awesome Text-Shadow by Nguyen Hoang Nam (@namho) on CodePen.

TEXT-SHADOW

See the Pen Text-Shadow by Mayur Elbhar (@mayurelbhar) on CodePen.

LONG SHADOW GRADIENT MIXIN

A Sass (SCSS) mixin to quickly generate long shadow gradients. Suitable for both text-shadow and box-shadow.

See the Pen Long Shadow Gradient Mixin by roikles (@roikles) on CodePen.

CSS3 TEXT-SHADOW EFFECTS

See the Pen CSS3 text-shadow effects by Jorge Epuñan (@juanbrujo) on CodePen.