20 CSS Text Shadow Effects

You can add multiple shadows and amazing effects to your text for your web designs. You may ask, how can I add shadow effects to a text? Yes, you can get through the CSS text-shadow effects by just copy and paste the codes.

In the below section, you can see the collection of text shadows designed using CSS only. So it will be quite easy for you to edit and adjust to your design.

A Collection of CSS Text-Shadow and Pattern Effects

This css code was developed by Ashley Nolan.

Tutorial          Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”QwvKaw” default_tab=”result” user=”ashleynolan”]See the Pen <a href=’https://codepen.io/ashleynolan/pen/QwvKaw/’>A collection of CSS text-shadow and pattern effects</a> by Ashley Nolan (<a href=’https://codepen.io/ashleynolan’>@ashleynolan</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

CSS Text Shadow

A pen by Chris Eisenbraun.

Tutorial          Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”upmDB” default_tab=”result” user=”chriseisenbraun”]See the Pen <a href=’https://codepen.io/chriseisenbraun/pen/upmDB/’>CSS Text Shadow</a> by Chris Eisenbraun (<a href=’https://codepen.io/chriseisenbraun’>@chriseisenbraun</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

10 CSS Text Shadows

This one was established by Tommy Hodgins.

Tutorial          Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”PGoVGJ” default_tab=”result” user=”tomhodgins”]See the Pen <a href=’https://codepen.io/tomhodgins/pen/PGoVGJ/’>10 CSS Text Shadows</a> by Tommy Hodgins (<a href=’https://codepen.io/tomhodgins’>@tomhodgins</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Animated Fire Text-Shadow

It was designed by Antti Nyman.

Tutorial          Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”cgGuL” default_tab=”result” user=”atnyman”]See the Pen <a href=’https://codepen.io/atnyman/pen/cgGuL/’>Animated Fire Text-Shadow</a> by Antti Nyman (<a href=’https://codepen.io/atnyman’>@atnyman</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

This code was made by Dodozhang21.

Tutorial          Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”itvfH” default_tab=”result” user=”dodozhang21″]See the Pen <a href=’https://codepen.io/dodozhang21/pen/itvfH/’>CSS text shadow gallery</a> by dodozhang21 (<a href=’https://codepen.io/dodozhang21′>@dodozhang21</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Groovy CSS Effect

The code was created by Daniel Gonzalez.

Tutorial          Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”bLYBQJ” default_tab=”result” user=”dan10gc”]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>.[/codepen_embed]

3D Cartoon Text Shadow

A pen was coded by Fielding Johnston.

Tutorial          Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”wYPRjj” default_tab=”result” user=”fielding”]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>.[/codepen_embed]

CSS Text-Shadow Effect

This code was developed by Jorge Epunan.

Tutorial          Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”azjWZq” default_tab=”result” user=”juanbrujo”]See the Pen <a href=’https://codepen.io/juanbrujo/pen/azjWZq/’>CSS text-shadow effect</a> by Jorge Epuñan (<a href=’https://codepen.io/juanbrujo’>@juanbrujo</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

3D Text Effect – Mousemove

A pen made by Dennis Garn.

Tutorial          Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”kHEKn” default_tab=”result” user=”dennisgarrn”]See the Pen <a href=’https://codepen.io/dennisgarrn/pen/kHEKn/’>3d Text effect – mousemove</a> by Dennis Garrn (<a href=’https://codepen.io/dennisgarrn’>@dennisgarrn</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

CSS Text-Shadow

The below code created by Br3ad.

Tutorial          Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”vEWyyp” default_tab=”result” user=”moldy_bread”]See the Pen <a href=’https://codepen.io/moldy_bread/pen/vEWyyp/’>CSS text-shadow</a> by Br3ad (<a href=’https://codepen.io/moldy_bread’>@moldy_bread</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Flickering Neon Sign Effect using CSS Text & Box Shadow

This pen was constructed by George W. Park.

Tutorial          Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”MrjbEr” default_tab=”result” user=”GeorgePark”]See the Pen <a href=’https://codepen.io/GeorgePark/pen/MrjbEr/’>Flickering Neon Sign Effect using CSS Text & Box Shadow</a> by George W. Park (<a href=’https://codepen.io/GeorgePark’>@GeorgePark</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Text Shadow using CSS

The below-one was published by Ronalds Vilcins.

Tutorial          Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”Bqodl” default_tab=”result” user=”ronaldsvilcins”]See the Pen <a href=’https://codepen.io/ronaldsvilcins/pen/Bqodl/’>CSS Text Shadow</a> by Ronalds Vilcins (<a href=’https://codepen.io/ronaldsvilcins’>@ronaldsvilcins</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

CSS Mouse Move Effect Text Shadow

A pen by Milica.

Tutorial          Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”PpaXMb” default_tab=”result” user=”micikato”]See the Pen <a href=’https://codepen.io/micikato/pen/PpaXMb/’>CSS text shadow mouse move effect</a> by Milica (<a href=’https://codepen.io/micikato’>@micikato</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Mixin – Random Text Shadow Shuffle and Random Color Effect

This code was written by Digisam.

Tutorial          Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”eZJRvp” default_tab=”result” user=”digisam”]See the Pen <a href=’https://codepen.io/digisam/pen/eZJRvp/’>Mixin – Random text shadow shuffle and random colour effect</a> by digisam (<a href=’https://codepen.io/digisam’>@digisam</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Text and Box Shading based on Cursor Movement

This code was established by Twixes.

Tutorial          Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”xZQVQW” default_tab=”result” user=”Twixes”]See the Pen <a href=’https://codepen.io/Twixes/pen/xZQVQW/’>Headlight.js – text and box shading based on cursor movement</a> by Twixes (<a href=’https://codepen.io/Twixes’>@Twixes</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Text Shadow Effect – CSS

The below-mentioned css code by Sara Kuhlman.

Tutorial          Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”JJaeQd” default_tab=”result” user=”sarakuhlman”]See the Pen <a href=’https://codepen.io/sarakuhlman/pen/JJaeQd/’>CSS text shadow effect</a> by Sara Kuhlman (<a href=’https://codepen.io/sarakuhlman’>@sarakuhlman</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

3D Text Shadow Effect

This code was written by Amelia Bellamy Royds.

Tutorial          Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”AuLak” default_tab=”result” user=”AmeliaBR”]See the Pen <a href=’https://codepen.io/AmeliaBR/pen/AuLak/’>3D Text-Shadow Effect</a> by Amelia Bellamy-Royds (<a href=’https://codepen.io/AmeliaBR’>@AmeliaBR</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Basic Text Shadows

It was made by Kate Hummer.

Tutorial          Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”JGORLX” default_tab=”result” user=”katehummer”]See the Pen <a href=’https://codepen.io/katehummer/pen/JGORLX/’>Basic Text Shadows</a> by Kate Hummer (<a href=’https://codepen.io/katehummer’>@katehummer</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

CSS Text Box Shadow Neon Sign Effect

The code was mentioned and given by George W. Park.

Tutorial          Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”BJKvjg” default_tab=”result” user=”GeorgePark”]See the Pen <a href=’https://codepen.io/GeorgePark/pen/BJKvjg/’>Neon Sign Effect using CSS Text/Box Shadow</a> by George W. Park (<a href=’https://codepen.io/GeorgePark’>@GeorgePark</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Text Shadow Mouse Move Effect with CSS

This pen was made by Florencia Aquino.

Tutorial          Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”EeWWoN” default_tab=”result” user=”Justeffie”]See the Pen <a href=’https://codepen.io/Justeffie/pen/EeWWoN/’>CSS Text Shadow Mouse Move Effect</a> by Florencia Aquino (<a href=’https://codepen.io/Justeffie’>@Justeffie</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]