Collection of hand-picked free HTML and CSS text shadow effect code examples from Codepen, GitHub and other resources. Update of October 2021 collection. 4 new items.
Related Articles

Links
Made with
- HTML / CSS
About a code
Bigger Font Size, Bigger Text Shadow
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Outlined Text Shadow with Fallback
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

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

Links
Made with
- HTML / CSS (SCSS)
About a code
Funky Retro Text Shadow
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
SAVE
Quirky CSS banner using box-shadow
s.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Popout Text With Background Image Shadow
Cutting out text from a background and then having it "popout" similar to how text shadow can be used. In fact, this does make use of text shadow!
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

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

Shaded Text
Shaded text, a SVG + CSS3 experiment about animated shadows. It isn't optimized for mobile devices... yet.
Made by Rafael González
September 16, 2016

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 (SCSS)
About a code
Pinchy Type with CSS text-shadow
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
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: -