Line25

Using CSS Text-Shadow to Create Cool Text Effects

Read the full post

The CSS3 text-shadow property has been around for some time now and is commonly used to recreate Photoshop’s Drop Shadow type shading to add subtle shadows which help add depth, dimension and to lift an element from the page. This isn’t all the text-shadow property is capable of though, by getting creative and playing around with the colours, offset and blurring we can create some clever and pretty cool text effects!

View the text-shadow effects

Check out the six text effects of vintage/retro, inset, anaglyphic, fire and board game in the demo, then copy the code snippets below to use the effects in your own designs. Needless to say you’ll need a text-shadow supporting browser (Safari, Chrome, Firefox) to see them in all their glory.

View the demo

How text-shadow works

How the CSS text-shadow property works

The text shadow CSS property is used to add shading to any text related HTML element. The syntax includes figures for the X-offset, the Y-offset, the blur amount and finally the colour of the actual shadow. What’s more, you don’t have to settle with one shadow, you can build up multiple text-shadow values to create some really cool effects!

Vintage / Retro text effect

Vintage text-shadow effect

text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;

How it works:

The vintage style text effect is made up of two text shadows, but the first is set to the same colour as the background in order to give the impression that the second shadow (the thin dark grey one) is offset to the bottom right. Remember to make sure your first shadow colour is set to the same colour as your page background, and the text and second shadow also both use the same colour.

View the demo

Neon text effect

Neon text-shadow effect

text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;

How it works:

The neon text effect is made up of 8 levels of shading. The base text is given a white fill, then each of the 8 text-shadow values are given larger and larger blur amounts while also getting darker. This blends between a vivid white inner glow and the large purple outer aura.

View the demo

Inset text effect

Inset text-shadow effect

text-shadow: 0px 2px 3px #666;

How it works:

The inset or letterpress style text effect is one of the more common uses of text-shadow. The shadow is offset on the Y-axis by a tiny amount to give the impression of a subtle highlight. On dark backgrounds offset the shadow underneath the text with a light colour, whereas on light backgrounds offset to the top of the text with a darker shadow colour.

View the demo

Anaglyphic text effect

Anaglyphic text-shadow effect

text-shadow: 8px 8px 0 rgba(255,0,180,0.5);

How it works:

The anaglyphic text effect recreates the cool effect used on old 3D images. The effect is recreated with CSS using a mix of text-shadow and RGBa colouring. Using RGBa on the text and the shadow allows the alpha channel to be set to 50% transparency so the underlying text is visible through the shadow.

View the demo

Fire text effect

Fire text-shadow effect

text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;

How it works:

The fire text effect is another style that uses multiple levels of shading. Each shadow is offset in different directions, uses various blur settings and blends a range of warm colours to create the impression of a flame. These colours span from bright whites through to yellows, oranges and darker amber tones.

View the demo

Board Game text effect

Board Game text-shadow effect

text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;

How it works:

The board game text effect simply uses multiple shadows each with an increasing amount of offset from the original text to create an alternating series of colours. No blurring is used to keep the shadows crisp and sharp as exact reproductions of the original text.

View the demo

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

  • http://www.red-team-design.com Red

    Nice effects Chris!

    I especially like the #FIRE one. Thanks for sharing this!

  • Babak

    Awesome!
    really like the way you use the property to make these cool effects.

  • http://rudyazhar.com Rudy Azhar

    Wow, this a new text-shadow effects Chris!

    I like the Anaglyphic text effect, thats good effect.

  • http://blog.sagi-design.co.il sagi

    So simple, yet creative, css bits, and its nice to have a bunch of them in one post.
    Chris, you rock man! :)
    Thanks

  • http://www.creativeindividual.co.uk Laura

    Ooooooh! Nice!!!! Thanks for the how to's too! :)

  • http://reg.kost.ru andr

    Thank you!

    Vintage / Retro & Inset are especially cool!

  • Legycsapo

    It's possible to make the 'inset' to work on IE?

    Really nice tut thank you !!!

  • Pavel

    Viva to CSS3!!! That IE cold be soo cool looking! They just don't get it!!

  • http://www.alan-horne.com/blog Alan

    Great tutorial Chris.

  • http://www.donroycodesign.nl Roy

    Thanks for this tutorial, Chris!

  • Pete

    This is awesome. Its a shame its real world application is restricted by IE.

  • Jaff

    Very Nice.

  • http://tastelikecrazy.com Amy @ Taste Like Crazy

    The Anaglyphic and Board Game effects are my favorites and now you've got me wondering where I should implement them.

  • http://www.devolved.co.uk steve firth

    Sweet, didn't know you could stack multiple shadows.

    • http://www.sensitivedesigns.com Sensitive Designs

      Yeh CSS3 Supports Multiple Styling.

      Ex: You can provide multiple background for an element.

  • http://jainamistry.com Jaina

    Had no idea you could stack the shadows like that. Love the effects!

  • http://freddielore89.blogspot.com Fred

    Wow…thanks for the info…

  • http://www.seanrainey.co.uk Sean Rainey

    Hey man, thanks very much.

  • http://www.lopezluis.com Luis Lopez

    I love the INSET and VINTAGE… the other not so much, but all are Awesome, if you know how much time I spent first time "some months ago" learning how to make a nice text shadow, or an inset effect you'll see how happy I'm to see yous post.

  • http://www.seandey.co.uk Sean

    Love this, really like Anaglyphic.

  • http://www.gabiton.com Gabriel

    Nice FX!
    I start playing with this effects and some jquery and this is the experiment i did
    http://test.gabiton.com.ar/glow/
    Check it in chrome or safari, ff doesnt seem to handle it right… (hover in the text)

  • http://www.myottawalife.com Melanie

    Great article and great example of why I love reading your sit! Can't wait to try these out.

    • http://www.myottawalife.com Melanie

      ahem…why I love reading your "site" : )

  • Nathaniel

    Excellent tutorial!

  • http://www.leegustin.com Lee Gustin

    Love these! Thanks Chris

  • http://www.buzz-webdesign.co.uk Buzz

    I thought I wasn't going to like these, but Vintage, Neon and Inset are great effects and the tuts are really handy… thanks!!

  • http://www.ilvinauta.it Gabriele

    NICE!!

  • chipchops

    very nice. thanks for sharing.

  • http://sanjaysprint.0fees.net sanji

    wow! didn't know shadow can be stack like that, really like the vintage and inset. cool post! keep it up man!

  • http://facebook.com/aayush.xtha Aayush Shrestha

    This is simply great!! Chris! u'v been my css icon… thnx for every blog u'v written!! :)

  • http://ice-horse.de/ Birgit

    great stuff! I didn't know that you can apply multiple shadows like in "fire" – very impressive effect :)

  • http://adooylabs.com audee velasco

    Hey Chris! Thanks for the enlightenment the text-shadows can be put on top of each other.. I agree with @sanji ! Awesome post as usual!

  • http://blefari.com.br Henrique Blefari

    Very Cool!
    Thanks for share!

  • http://margoutomo.net margo utomo

    wow..great..very nice..thanks for sharing..

  • http://eternal.co.za Marc Heiligers

    Nice! Great little tutorial/demo. I also used the Neon sample to hack a little something together. Could use some tweaking, but it's got potential: http://fascinationstreet.co.za/untitled/neon.html

  • http://heathwaller.com/ heath waller

    What a great tutorial, Chris! So concise. Great examples. I'm excited to try some of these out. The Anaglyphic in particular…

  • http://www.jc-designs.net/blog Jeremy Carlson

    I already knew how to do multiple text-shadow effects, but these actually look good. Nice job!

  • http://www.jeffthorp.com Jeffery Thorp

    Thanks for sharing. Inset and and vintage are cool.

  • http://www.niftylinks.net Greg Jeffries

    These techniques are freaking ridiculous. Thanks so much for sharing!

  • http://www.igweb.fr iGweb

    Merci pour ce post !!
    Exellement

    • http://www.igweb.fr iGweb

      Je voulais dire Excellent !! ;-)

  • http://beben-koben.blogspot.com/ Beben Koben

    would be nice if this effect we use the trick a:hover…hihihihi
    nice nice nice

  • http://www.disenopaginasweb.com inturias

    nice effects.. but.. only ie9…! :(

  • http://www.wordpress-site.net/ Bruno

    WordPress with CSS text shadow will be nice, i would try out. Thank you to share.

  • http://imperion.pl Paweł P.

    Great examples!
    Best regards!

  • http://playstationnetworkcodesfree.blogspot.com/ Monica Reyes

    I'm definitely going to try out the vintage retro text effect, thanks!

  • http://astro-girls.com/astrology/ astrology

    neat effects, chris. thanks for the pointers. appreciate all the tips on website design, especially css. kudos to all the contributors!

  • http://www.cre8ivdesign.co.uk G Downs

    Love it. Now i need to create a web design for a client that i can use this with… can't wait

  • http://www.webtrendset.com webtrendset

    It's definitely awesome work
    Thankyou…

  • http://www.squarechilli.co.uk David

    It just goes to show the power of what css is actually able to achieve coupled with some imagination and time.

    Great post

  • http://www.360mag.bg toun

    text-shadow property is amazing! shame on IE for not following this.

  • http://www.smashwebs.com nate

    Really neat effects, but I have to kill the cat…they are all pretty difficult to read…

  • http://www.calaveracreative.net/ Dave

    awesome stuff, i'm sure to steal a few of those :) thanks again

  • http://www.realtimehungama.com Datshay

    WoW !!!
    I just like the neon……. great….

  • http://jrutlanddesign.co.uk Jrutlanddesign

    great post, I love the INSET, looks so nice when its done well, also the anaglyphic one is really nice

  • http://www.legerbabe.com/ leo

    shame on IE for not following this.

  • http://www.advitum.de/?linkid=comment Advitum Webdesign

    Great article! I just got the idea to make a 3D-page with the anaglyph-effect…

  • http://katalog.wyrusz.pl covalic

    Great post. Thx :)

  • http://www.szybas.com Sejfy

    Very nice effects, pretty and clean, delicious :]