Collection of hand-picked free HTML and CSS text shadow effect code examples.
Related Articles
- CSS Text Effects
- CSS Glow Text Effects
- CSS 3D Text Effects
- CSS Text Animations
- CSS Text Glitch Effects

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: -

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: -


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: -


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: -


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: -


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: -

Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Fancy Text Shadow
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -

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: -

Links
Made with
- HTML / CSS (SCSS)
About the code
Pretty Shadow
Pretty text shadow.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -

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: -

Links
Made with
- HTML / CSS / JavaScript
About the code
Neon Effects
Neon text-shadow
effects.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -

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: -

Links
Made with
- HTML / CSS
About the code
Text-Shadow
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -

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: -

Links
Made with
- HTML (Haml) / CSS (Less)
About the code
CSS3 text-shadow Effects
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -

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: -