30+ CSS Text Shadow Effects

Add a touch of shadow effects to your website’s text with our eye-catching compilation of HTML and CSS text shadow effect code examples. Whether you’re a user interface designer or web developer, our hand-picked collection of text shadow effects allows you to add a three-dimensional or visually appealing look to your static text.

Each item in our top text shadow effects is curated from the best platforms like GitHub and Codepen, enhancing visual aesthetics, adding depth, and highlighting key content. From subtle text shadow effects to dynamic shadow patterns, we offer a wide range of CSS text shadow code examples for everyone.

Our collection is 100% free to use, easy to customise, adds depth and dimension, improves readability, and maintains visual hierarchy, making text stand out or blend into backgrounds more smoothly.

Discover the true power of CSS to make your typography look and feel alive while simultaneously improving the overall design of your web projects.

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)