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.light

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.light

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.light

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.light

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.light

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

FANCY TEXT SHADOW

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

CSS TEXT-SHADOW

Modern shadow effect for text with CSS text-shadow.

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

PRETTY SHADOW

Pretty text shadow.

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

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.light

NEON EFFECTS

Neon text-shadow effects.

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

AWESOME TEXT-SHADOW

Flat and simple text shadow effect.

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

TEXT-SHADOW

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

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.light

CSS3 TEXT-SHADOW EFFECTS

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