Collection of hand-picked free HTML and CSS text shadow effect code examples.

  1. CSS Text Effects
  2. CSS Glow Text Effects
  3. CSS 3D Text Effects
  4. CSS Text Animations
  5. CSS Text Glitch Effects
Demo image: 3D Cartoon Text with CSS text-shadow

Creator

  • Fielding Johnston

Programming language

  • HTML / CSS

Information the code

3D Cartoon Text with CSS text-shadow

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: SCSS 3D Text Mixin

Creator

  • Liam Egan

Programming language

  • HTML / CSS (SCSS)

Information the code

SCSS 3D Text Mixin

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Animated text-shadow Animated text-shadow - GIF Demo

Creator

  • Erin E. Sullivan

Programming language

  • HTML / CSS

Information the code

Animated text-shadow

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Direction-Aware text-shadow Direction-Aware text-shadow - GIF Demo

Creator

  • Martin Picod

Programming language

  • HTML / CSS (SCSS) / JavaScript

Information the code

Direction-Aware text-shadow

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Groovy CSS Effect Groovy CSS Effect - GIF Demo

Creator

  • Daniel Gonzalez

Programming language

  • HTML (Pug) / CSS (SCSS)

Information the code

Groovy CSS Effect

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Netflix Style Text Animation with CSS Netflix Style Text Animation with CSS - GIF Demo

Creator

  • Nooray Yemon

Programming language

  • HTML (Slim) / CSS (SCSS)

Information the code

Netflix Style Text Animation with CSS

Netflix style text animation with CSS and a SCSS function to have the long text shadow.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Fancy Text Shadow

Creator

  • agathaco

Programming language

  • HTML (Pug) / CSS (SCSS)

Information the code

Fancy Text Shadow

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: CSS text-shadow

Creator

  • IMarty

Programming language

  • HTML / CSS (SCSS)

Information the code

CSS text-shadow

Modern shadow effect for text with CSS text-shadow.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Pretty Shadow

Creator

  • Alex Moore

Programming language

  • HTML / CSS (SCSS)

Information the code

Pretty Shadow

Pretty text shadow.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Variable Longshadow with Gradients Mixin

Creator

  • Dario Corsi

Programming language

  • HTML / CSS (SCSS)

Information the code

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.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Neon Effect

Creator

  • Erik Jung

Programming language

  • HTML / CSS / JavaScript

Information the code

Neon Effects

Neon text-shadow effects.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Awesome text-shadow

Creator

  • Nguyen Hoang Nam

Programming language

  • HTML / CSS

Information the code

Awesome text-shadow

Flat and simple text shadow effect.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Text-Shadow

Creator

  • Mayur Elbhar

Programming language

  • HTML / CSS

Information the code

Text-Shadow

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Long Shadow Gradient Mixin

Creator

  • roikles

Programming language

  • HTML / CSS (SCSS)

Information the code

Long Shadow Gradient Mixin

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: CSS3 text-shadow Effects

Creator

  • Jorge Epuñan

Programming language

  • HTML (Haml) / CSS (Less)

Information the code

CSS3 text-shadow Effects

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: CSS Dashed Shadow

Creator

  • Lucas Bebber

Programming language

  • HTML / CSS (SCSS)

Information the code

CSS Dashed Shadow

Pure CSS hipster-ish typographic dashed shadow.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: