30 CSS Text Shadow Effects

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.

Mega Shadow Text

Author

  • Mark Mead

Made with

  • HTML / CSS / JS

Created on

  • DECEMBER 10, 2012

Updated on

  • DECEMBER 10, 2012

Useful Links

Dependency

jquery.min.js

About the Code

It’s like text-shadow on steroids.

Dynamic text shadow based on cursor position

Author

  • Brian Gonzalez

Made with

  • Haml / SCSS / JS

Created on

  • NOVEMBER 5, 2012

Updated on

  • MAY 7, 2013

Useful Links

Dependency

jquery.min.js

About the Code

Dynamic text shadow based on cursor position

Utterly Ridiculous Text Shadow

30 CSS Text Shadow Effects 1

Author

  • Richard Stanley

Made with

  • HTML / SCSS

Created on

  • NOVEMBER 3, 2021

Updated on

  • NOVEMBER 4, 2021

Useful Links

About the Code

An Utterly Ridiculous Text Shadow

CSS Text Shadow Animation

Author

  • Yeshua Emanuel Braz

Made with

  • Pug / SCSS

Created on

  • NOVEMBER 4, 2021

Updated on

  • NOVEMBER 5, 2021

Useful Links

About the Code

tags: cpc-text-shadow, CSS, Animation

Rotate Text and Shadow

Author

  • Jason Yeung

Made with

  • Pug / SCSS

Created on

  • NOVEMBER 5, 2021

Updated on

  • NOVEMBER 7, 2021

Useful Links

About the Code

Rushed the code pretty badly so will need to be refactored in the future

Text Shadow CodePen Challenge

Author

  • fedeperin

Made with

  • HTML / CSS

Created on

  • NOVEMBER 6, 2021

Updated on

  • NOVEMBER 7, 2021

Useful Links

About the Code

Text Shadow #codepenchallenge

CodePen Challenge – CSS Text Shadow

Author

  • miranda

Made with

  • HTML / SCSS

Created on

  • NOVEMBER 5, 2021

Updated on

  • NOVEMBER 9, 2021

Useful Links

About the Code

CodePen Challenge – CSS-only Text Shadow Effects

Text shadow animations

Author

  • Josetxu

Made with

  • HTML / CSS

Created on

  • NOVEMBER 2, 2021

Updated on

  • DECEMBER 16, 2021

Useful Links

About the Code

Testing Text shadow effects animation.

3d text shadow

30 CSS Text Shadow Effects 2

Author

  • Ponycorn

Made with

  • HTML / CSS

Created on

  • SEPTEMBER 30, 2022

Updated on

  • SEPTEMBER 30, 2022

Useful Links

About the Code

3d text shadow effects

Text Shadow

30 CSS Text Shadow Effects 3

Author

  • Mayur Elbhar

Made with

  • HTML / CSS

Created on

  • NOVEMBER 13, 2014

Updated on

  • NOVEMBER 13, 2014

Useful Links

About the Code

tags: text-shadow, css-only, CSS, text-effect, vintage

Text-Shadow Animate

Author

  • Wyatt Nolen

Made with

  • HTML / SCSS

Created on

  • JUNE 9, 2017

Updated on

  • APRIL 1, 2019

Useful Links

About the Code

text-shadow, rainbow, css-only, sass-function

Complex Text Shadow Examples

Author

  • Chris Coyier

Made with

  • Slim / CSS

Created on

  • July 10, 2012

Updated on

  • July 24, 2012

Useful Links

About the Code

Compilation of some fancy text shadow effects from around the web

Contoh Text Shadow

Author

  • Sandhika Galih

Made with

  • HTML / CSS

Created on

  • JUNE 7, 2016

Updated on

  • JUNE 7, 2016

Useful Links

About the Code

Contoh Text Shadow effects

Opening type Shadow

Author

  • Diego Pardo

Made with

  • HTML / CSS

Created on

  • OCTOBER 24, 2013

Updated on

  • OCTOBER 29, 2013

Useful Links

Dependency

jquery.min.js

About the Code

Just hover over letters

CSS Text-Shadow Animation

Author

  • Faria Begum Riya

Made with

  • HTML / SCSS

Created on

  • AUGUST 30, 2020

Updated on

  • AUGUST 30, 2020

Useful Links

About the Code

tags: CSS, text-shadow

Text shadows Click & drag

Author

  • Danny Joris

Made with

  • Pug / CSS / JS

Created on

  • APRIL 1, 2018

Updated on

  • APRIL 8, 2018

Useful Links

Dependency

jquery.min.js

About the Code

Drag to reposition the text shadow.

Direction-aware text-shadow

Author

  • Martin Picod

Made with

  • HTML / SCSS / JS

Created on

  • JUNE 13, 2018

Updated on

  • JUNE 14, 2018

Useful Links

About the Code

Direction-aware text-shadow, use of CSS variables to create perspective and 3D light effect on text

3D CSS/JS dynamic shadow

Author

  • Marc López Ávila

Made with

  • HTML / CSS / JS

Created on

  • MAY 1, 2016

Updated on

  • SEPTEMBER 5, 2022

Useful Links

About the Code

Text shadow depends on the light focus. I made it with CSS and JS using multiple text-shadow properties, creating a 3D effect.

Long Shadow Gradient Mixin

30 CSS Text Shadow Effects 4

Author

  • roikles

Made with

  • HTML / SCSS

Created on

  • MAY 20, 2014

Updated on

  • MARCH 3, 2022

Useful Links

About the Code

A Sass (Scss) Mixin to quickly generate long shadow gradients. Suitable for both ‘text-shadow’ and ‘box-shadow’.

Simple Text Shadow Effect

Author

  • Maciej Leszczyński

Made with

  • HTML / CSS

Created on

  • MARCH 25, 2016

Updated on

  • DECEMBER 16, 2017

Useful Links

About the Code

Tags: text-shadow, shadow, text-effect

Animated Fire Text-Shadow

30 CSS Text Shadow Effects 5

Author

  • Antti Nyman

Made with

  • HTML / CSS

Created on

  • MARCH 22, 2013

Updated on

  • MARCH 28, 2013

Useful Links

Fancy text shadow

30 CSS Text Shadow Effects 6

Author

  • agathaco

Made with

  • Pug / SCSS

Created on

  • JUNE 9, 2017

Updated on

  • JUNE 23, 2017

Useful Links

Animated Text-Shadow

Author

  • Erin E. Sullivan

Made with

  • HTML / CSS

Created on

  • SEPTEMBER 10, 2018

Updated on

  • JANUARY 18, 2019

Useful Links

About the Code

A fun, CSS animation that creates a bounce while mimicking an RGB separation during the process.

3D-Text with Text-Shadow

30 CSS Text Shadow Effects 7

Author

  • Daniel Riemer

Made with

  • HTML / CSS

Created on

  • DECEMBER 29, 2012

Updated on

  • SEPTEMBER 12, 2013

Useful Links

About the code

Nice looking text-effect using CSS 3 text-shadow and rgba-values.

CSS3 text-shadow

30 CSS Text Shadow Effects 8

Author

  • Tommy McDonald

Made with

  • HTML / CSS

Created on

  • FEBRUARY 14, 2013

Updated on

  • SEPTEMBER 1, 2021

Useful Links

About the code

Drew some inspiration from another post on here, and had some fun with text-shadow.

Layered text-shadow effect CSS

30 CSS Text Shadow Effects 9

Author

  • Shireen Taj

Made with

  • HTML / CSS

Created on

  • DECEMBER 13, 2019

Updated on

  • AUGUST 31, 2020

Useful Links

About the code

text-shadow is a fun little CSS style that can spark up any simple text into a beautiful work of art. 

3d Text effect – mouse move

Author

  • Dennis Garrn

Made with

  • HTML / CSS / JS

Created on

  • July 12, 2013

Updated on

  • July 12, 2013

Useful Links

Dependency

About the Code

Nice 3d Text effect with jQuery mouse move

Hit The Floor Text Effect

30 CSS Text Shadow Effects 10

Author

  • ThatGuySam

Made with

  • HTML / PostCSS

Created on

  • OCTOBER 5, 2013

Updated on

  • OCTOBER 7, 2021

Useful Links

About the code

A cool text-style text-shadow using only CSS.

Popout Text with Background Image Shadow

Author

  • Mark Mead

Made with

  • Pug / SCSS

Created on

  • September 21, 2016

Updated on

  • September 21, 2016

Useful Links

About the Code

Cutting out text from a background and then having it “popout” is similar to how text shadow can be used. In fact, this does make use of text shadow!

Neon text-shadow effect

30 CSS Text Shadow Effects 11

Author

  • Erik Jung

Made with

  • HTML / CSS / JS

Created on

  • FEBRUARY 27, 2016

Updated on

  • MAY 24, 2017

Useful Links

About the Code

tags: text shadow effects, CSS

Tags: , ,
Categories:
W3TWEAKS
Latest posts by W3TWEAKS (see all)

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *