30+ CSS Text Shadow Effects

Eye-catching compilation of top 30+ HTML and CSS text shadow effect code examples. Each item is 100% free to use, easy to customise, adds depth and dimension, improves readability, and maintains visual hierarchy.

1. CSS3 text-shadow effects

See the Pen <a href="https://codepen.io/juanbrujo/pen/DBKxxM"> CSS3 text-shadow effects</a> by Jorge Epuñan (<a href="https://codepen.io/juanbrujo">@juanbrujo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jorge Epuñan
Source: Code / Demo
Created on: MARCH 12, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(Less)

2. [webkit] Animated “text-shadow” pattern

See the Pen <a href="https://codepen.io/carpenumidium/pen/nVgdez"> [webkit] Animated “text-shadow” pattern</a> by carpe numidium (<a href="https://codepen.io/carpenumidium">@carpenumidium</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: carpe numidium
Source: Code / Demo
Created on: DECEMBER 21, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

3. CSS Text Shadow

See the Pen <a href="https://codepen.io/chriseisenbraun/pen/AxNWNp"> CSS Text Shadow</a> by Chris Eisenbraun (<a href="https://codepen.io/chriseisenbraun">@chriseisenbraun</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chris Eisenbraun
Source: Code / Demo
Created on: JANUARY 27, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

4. CSS3 text-shadow

See the Pen <a href="https://codepen.io/tommymcdonald/pen/DrxYYX"> CSS3 text-shadow</a> by Tommy McDonald (<a href="https://codepen.io/tommymcdonald">@tommymcdonald</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Tommy McDonald
Source: Code / Demo
Created on: FEBRUARY 15, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

5. Layered text-shadow effect CSS

See the Pen <a href="https://codepen.io/TajShireen/pen/abzmoRE"> Layered text-shadow effect CSS</a> by Shireen Taj (<a href="https://codepen.io/TajShireen">@TajShireen</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Shireen Taj
Source: Code / Demo
Created on: DECEMBER 13, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

6. Text Shadow- Rainbow Effect

See the Pen <a href="https://codepen.io/aakhya/pen/VVMwMr"> Text Shadow Example</a> by Aakhya Singh (<a href="https://codepen.io/aakhya">@aakhya</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Aakhya Singh
Source: Code / Demo
Created on: NOVEMBER 18, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

7. Funky Retro Text Shadow

See the Pen <a href="https://codepen.io/mirandalwashburn/pen/QWELaGp"> Funky Retro Text Shadow</a> by miranda (<a href="https://codepen.io/mirandalwashburn">@mirandalwashburn</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: miranda
Source: Code / Demo
Created on: OCTOBER 6, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

8. Knockout Text Example

See the Pen <a href="https://codepen.io/aakhya/pen/qQXVJp"> Knockout Text Example</a> by Aakhya Singh (<a href="https://codepen.io/aakhya">@aakhya</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Aakhya Singh
Source: Code / Demo
Created on: NOVEMBER 18, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

9. 3D Cartoon Text with CSS Text Shadow

See the Pen <a href="https://codepen.io/fielding/pen/wYPRjj"> 3D Cartoon Text w/CSS text-shadow</a> by Fielding Johnston (<a href="https://codepen.io/fielding">@fielding</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Fielding Johnston
Source: Code / Demo
Created on: OCTOBER 16, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

10. Pinchy Type with CSS Text-Shadow

See the Pen
Pinchy Type with CSS text-shadow by Bennett Feely (@bennettfeely)
on CodePen.

Author: Bennett Feely
Source: Code / Demo
Created on: AUGUST 23, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

11. CSS text shadow effect

See the Pen <a href="https://codepen.io/markcarrrr/pen/mdOBxJz"> CSS text shadow effect</a> by Mark (<a href="https://codepen.io/markcarrrr">@markcarrrr</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mark
Source: Code / Demo
Created on: FEBRUARY 22, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

12. Outlined Text Shadow with Fallback

See the Pen <a href="https://codepen.io/eeeps/pen/YzNNZqo"> outlined text shadow with fallback</a> by Eric Portis (<a href="https://codepen.io/eeeps">@eeeps</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Eric Portis
Source: Code / Demo
Created on: MARCH 31, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

13. Netflix Style Text Animation With CSS

See the Pen <a href="https://codepen.io/yemon/pen/BwOOWZ"> Netflix style text animation with CSS</a> by Nooray Yemon (<a href="https://codepen.io/yemon">@yemon</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nooray Yemon
Source: Code / Demo
Created on: OCTOBER 14, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(SLIM), CSS(SCSS)

14. Rotating Text Shadow (CSS only)

See the Pen <a href="https://codepen.io/DanteInfernali/pen/eYYMqRd"> Rotating Text Shadow (CSS only)</a> by DanteInfernali (<a href="https://codepen.io/DanteInfernali">@DanteInfernali</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: DanteInfernali
Source: Code / Demo
Created on: NOVEMBER 06, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

15. Animated Text-Shadow

See the Pen <a href="https://codepen.io/erinesullivan/pen/ZMreqJ"> Animated Text-Shadow</a> by Erin E. Sullivan (<a href="https://codepen.io/erinesullivan">@erinesullivan</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Erin E. Sullivan
Source: Code / Demo
Created on: SEPTEMBER 10, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

16. Shaded Text

See the Pen <a href="https://codepen.io/rgg/pen/ozLzbz"> Shaded Text</a> by Rafael González (<a href="https://codepen.io/rgg">@rgg</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Rafael González
Source: Code / Demo
Created on: SEPTEMBER 16, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

17. Bigger font size, bigger text shadow

See the Pen <a href="https://codepen.io/argyleink/pen/JjNOLrL"> Bigger font size, bigger text shadow</a> by Adam Argyle (<a href="https://codepen.io/argyleink">@argyleink</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Adam Argyle
Source: Code / Demo
Created on: JULY 24, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

18. Variable Longshadow with Gradients Mixin

See the Pen <a href="https://codepen.io/dariocorsi/pen/jqxERJ"> Variable Longshadow with Gradients Mixin</a> by Dario Corsi (<a href="https://codepen.io/dariocorsi">@dariocorsi</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dario Corsi
Source: Code / Demo
Created on: APRIL 15, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

19. Pretty Shadow

See the Pen <a href="https://codepen.io/MoorLex/pen/BzgyyY"> Pretty shadow</a> by Alex Moore (<a href="https://codepen.io/MoorLex">@MoorLex</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alex Moore
Source: Code / Demo
Created on: AUGUST 24, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

20. Text Shadow- Embossed

See the Pen <a href="https://codepen.io/aakhya/pen/pQWywK"> Text Shadow Example</a> by Aakhya Singh (<a href="https://codepen.io/aakhya">@aakhya</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Aakhya Singh
Source: Code / Demo
Created on: NOVEMBER 18, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

21. Neon Text-shadow Effect

See the Pen <a href="https://codepen.io/erikjung/pen/XdWEKE"> Neon text-shadow effect</a> by Erik Jung (<a href="https://codepen.io/erikjung">@erikjung</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Erik Jung
Source: Code / Demo
Created on: FEBRUARY 28, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

22. Animated Fire Text-Shadow

See the Pen <a href="https://codepen.io/atnyman/pen/nmEyjK"> Animated Fire Text-Shadow</a> by Antti Nyman (<a href="https://codepen.io/atnyman">@atnyman</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Antti Nyman
Source: Code / Demo
Created on: MARCH 22, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

23. 3D-Text with Text-Shadow

See the Pen <a href="https://codepen.io/zitrusfrisch/pen/kBNEag"> 3D-Text with Text-Shadow</a> by Daniel Riemer (<a href="https://codepen.io/zitrusfrisch">@zitrusfrisch</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Daniel Riemer
Source: Code / Demo
Created on: DECEMBER 29, 2012
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

24. Text-Shadow

See the Pen <a href="https://codepen.io/mayurelbhar/pen/wBvGbX"> Text-Shadow</a> by Mayur Elbhar (<a href="https://codepen.io/mayurelbhar">@mayurelbhar</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mayur Elbhar
Source: Code / Demo
Created on: NOVEMBER 13, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

25. Text Shadow- Emerging Out

See the Pen <a href="https://codepen.io/aakhya/pen/LXjwrq"> Text Shadow Example</a> by Aakhya Singh (<a href="https://codepen.io/aakhya">@aakhya</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Aakhya Singh
Source: Code / Demo
Created on: NOVEMBER 18, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

26. Fancy text shadow

See the Pen <a href="https://codepen.io/agathaco/pen/KqVWEw"> Fancy text shadow</a> by agathaco (<a href="https://codepen.io/agathaco">@agathaco</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: agathaco
Source: Code / Demo
Created on: JUNE 9, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

27. CSS Alphabets

See the Pen <a href="https://codepen.io/SuperbProgrammer/pen/vYeBbBL"> CSS Alphabets | Part-1 [A] | #Programmer</a> by #Programmer (<a href="https://codepen.io/SuperbProgrammer">@SuperbProgrammer</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: #Programmer
Source: Code / Demo
Created on: NOVEMBER 29, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

28. Groovy CSS Effect

See the Pen <a href="https://codepen.io/dan10gc/pen/bLYBQJ"> Groovy CSS Effect</a> by Daniel Gonzalez (<a href="https://codepen.io/dan10gc">@dan10gc</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Daniel Gonzalez
Source: Code / Demo
Created on: FEBRUARY 16, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

29. Complex Text Shadow Examples

See the Pen <a href="https://codepen.io/chriscoyier/pen/DqQpJD"> Complex Text Shadow Examples</a> by Chris Coyier (<a href="https://codepen.io/chriscoyier">@chriscoyier</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chris Coyier
Source: Code / Demo
Created on: JULY 10, 2012
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Slim), CSS

30. Text Shadow- Letterpressed

See the Pen <a href="https://codepen.io/aakhya/pen/wQrwvJ"> Text Shadow Example</a> by Aakhya Singh (<a href="https://codepen.io/aakhya">@aakhya</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Aakhya Singh
Source: Code / Demo
Created on: NOVEMBER 18, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

31. Text Shadow

See the Pen <a href="https://codepen.io/IMarty/pen/WOvvEE"> text-shadow </a> by IMarty (<a href="https://codepen.io/IMarty">@IMarty</a>) on <a href="https://codepen.io">CodePen</a>. Author: IMarty
Source: Code / Demo
Created on: JUNE 6, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)