In this collection, we’ve gathered 30 free text shadow effects that you can use to enhance your website’s typography. Each effect includes the CSS code and a live demo, making it easy to add the effect to your own website.
Whether you’re designing a modern website, a retro-themed project, or anything in between, these text shadow effects are sure to add some visual interest to your typography.
01 of 30Mega Shadow Text
01
of 30
Author
- Mark Mead
Made with
- HTML / CSS / JS
Created on
- DECEMBER 10, 2012
Updated on
- DECEMBER 10, 2012
Dependency
About the Code
It’s like text-shadow on steroids.
02 of 30Dynamic text shadow based on cursor position
02
of 30
Author
- Brian Gonzalez
Made with
- Haml / SCSS / JS
Created on
- NOVEMBER 5, 2012
Updated on
- MAY 7, 2013
Dependency
About the Code
Dynamic text shadow based on cursor position
03 of 30Utterly Ridiculous Text Shadow
03
of 30
04 of 30CSS Text Shadow Animation
04
of 30
05 of 30Rotate Text and Shadow
05
of 30
06 of 30Text Shadow CodePen Challenge
06
of 30
07 of 30CodePen Challenge – CSS Text Shadow
07
of 30
08 of 30Text shadow animations
08
of 30
09 of 303d text shadow
09
of 30
10 of 30Text Shadow
10
of 30
11 of 30Text-Shadow Animate
11
of 30
12 of 30Complex Text Shadow Examples
12
of 30
13 of 30Contoh Text Shadow
13
of 30
14 of 30Opening type Shadow
14
of 30
Author
- Diego Pardo
Made with
- HTML / CSS
Dependency
About the Code
Just hover over letters
15 of 30CSS Text-Shadow Animation
15
of 30
16 of 30Text shadows Click & drag
16
of 30
Author
- Danny Joris
Made with
- Pug / CSS / JS
Dependency
About the Code
Drag to reposition the text shadow.
17 of 30Direction-aware text-shadow
17
of 30
18 of 303D CSS/JS dynamic shadow
18
of 30
19 of 30Long Shadow Gradient Mixin
19
of 30
20 of 30Simple Text Shadow Effect
20
of 30
21 of 30Animated Fire Text-Shadow
21
of 30
22 of 30Fancy text shadow
22
of 30
23 of 30Animated Text-Shadow
23
of 30
24 of 303D-Text with Text-Shadow
24
of 30
25 of 30CSS3 text-shadow
25
of 30
26 of 30Layered text-shadow effect CSS
26
of 30
27 of 303d Text effect – mouse move
27
of 30
Author
- Dennis Garrn
Made with
- HTML / CSS / JS
Created on
- July 12, 2013
Updated on
- July 12, 2013
Dependency
About the Code
Nice 3d Text effect with jQuery mouse move
28 of 30Hit The Floor Text Effect
28
of 30
29 of 30Popout Text with Background Image Shadow
29
of 30
Discussion about this post