Collection of hand-picked free HTML and CSS text shadow effect code examples from codepen and other resources. Update of October 2018 collection. 4 new items.

Related Articles

  1. CSS Text Effects
  2. CSS Typing Text Effects
  3. CSS box-shadow Examples
Demo image: Bigger Font Size, Bigger Text Shadow

Author

  • Adam Argyle

Links

Made with

  • HTML / CSS

About a code

Bigger Font Size, Bigger Text Shadow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Outlined Text Shadow with Fallback

Author

  • Eric Portis

Links

Made with

  • HTML / CSS

About a code

Outlined Text Shadow with Fallback

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: CSS Text Shadow Effect

Author

  • Mark Carr

Links

Made with

  • HTML / CSS (SCSS)

About a code

CSS Text Shadow Effect

A CSS text background shadow effect using the content attribute.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Funky Retro Text Shadow

Author

  • miranda

Links

Made with

  • HTML / CSS (SCSS)

About a code

Funky Retro Text Shadow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: 3D Cartoon Text with CSS text-shadow

Author

  • Fielding Johnston

Links

Made with

  • HTML / CSS

About the code

3D Cartoon Text with CSS text-shadow

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: SCSS 3D Text Mixin

Author

  • Liam Egan

Links

Made with

  • HTML / CSS (SCSS)

About the code

SCSS 3D Text Mixin

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

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

Author

  • Erin E. Sullivan

Links

Made with

  • HTML / CSS

About the code

Animated text-shadow

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

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

Author

  • Martin Picod

Links

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

Direction-Aware text-shadow

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

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

Author

  • Daniel Gonzalez

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Groovy CSS Effect

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

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

Author

  • Nooray Yemon

Links

Made with

  • HTML (Slim) / CSS (SCSS)

About the code

Netflix Style Text Animation with CSS

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Fancy Text Shadow

Author

  • agathaco

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Fancy Text Shadow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: CSS text-shadow

Author

  • IMarty

Links

Made with

  • HTML / CSS (SCSS)

About the code

CSS text-shadow

Modern shadow effect for text with CSS text-shadow.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Pretty Shadow

Author

  • Alex Moore

Links

Made with

  • HTML / CSS (SCSS)

About the code

Pretty Shadow

Pretty text shadow.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Variable Longshadow with Gradients Mixin

Author

  • Dario Corsi

Links

Made with

  • HTML / CSS (SCSS)

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Neon Effect

Author

  • Erik Jung

Links

Made with

  • HTML / CSS / JavaScript

About the code

Neon Effects

Neon text-shadow effects.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Awesome text-shadow

Author

  • Nguyen Hoang Nam

Links

Made with

  • HTML / CSS

About the code

Awesome text-shadow

Flat and simple text shadow effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Text-Shadow

Author

  • Mayur Elbhar

Links

Made with

  • HTML / CSS

About the code

Text-Shadow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Long Shadow Gradient Mixin

Author

  • roikles

Links

Made with

  • HTML / CSS (SCSS)

About the code

Long Shadow Gradient Mixin

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: CSS3 text-shadow Effects

Author

  • Jorge Epuñan

Links

Made with

  • HTML (Haml) / CSS (Less)

About the code

CSS3 text-shadow Effects

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: CSS Dashed Shadow

Author

  • Lucas Bebber

Links

Made with

  • HTML / CSS (SCSS)

About the code

CSS Dashed Shadow

Pure CSS hipster-ish typographic dashed shadow.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -