Fun with CSS3 Text Shadow Property

    written by Nikola Lazarevic

    Typography is everyone’s favorite toy in web design. The CSS3 text-shadow property 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. But this isn’t all the text-shadow property is capable of. With a little ingenuity and creativity text-shadow can create some remarkable effects.

    Today we’re going to run through several CSS3 text-shadow examples that you can copy and paste for your own work.

    Syntax

    text-shadow: horizontal-offset vertical-offset blur color;
    

    The syntax includes four variables to work with, the first two set your shadow’s position (horizontal and vertical), the third sets the amount of blur and the fourth the color of the shadow.
    The best thing is – you don’t have to settle with one shadow, you can build up multiple text-shadow values to create some really interesting effects!

    Retro Text Effect

    There is a clear separation between the text and its shadow. This effect can be achieved using two text-shadow values — one nearer to the letterform, and matching the background color, in order to give the impression that the second shadow is offset to the bottom right.

    Retro Text Effect

    text-shadow: 4px 4px 0px background-color, 10px 10px 0px shadow-color;
    

    3D Text Effect

    Use multiple text-shadows to create impressive 3D text effect – by Marko Dotto.

    3D Text Effect

    text-shadow: 0 1px 0 #ccc,
    			 0 2px 0 #c9c9c9,
    			 0 3px 0 #bbb,
    			 0 4px 0 #b9b9b9,
    			 0 5px 0 #aaa,
    			 0 6px 1px rgba(0,0,0,.1),
    			 0 0 5px rgba(0,0,0,.1),
    			 0 1px 3px rgba(0,0,0,.3),
    			 0 3px 5px rgba(0,0,0,.2),
    			 0 5px 10px rgba(0,0,0,.25),
    			 0 10px 10px rgba(0,0,0,.2),
    			 0 20px 20px rgba(0,0,0,.15);
    

    Hard Shadow Text Effect

    Hard text shadows are very popular due to their “retro” nature and they are achieved without bluring shadow.

    Hard Shadow Text Effect

    text-shadow:-4px -2px 0 #fff;
    

    Anaglyphic Text Effect

    Anaglyphic text effect provide stereoscopic 3D effect. It’s achieved by using RGBa on the text and the shadow, so the underlying text is visible through the shadow.

    Anaglyphic Text Effect

    color:rgba(67,153,97,.5);
    text-shadow:8px 8px 0 rgba(236,144,79, 0.6);
    

    Letterpress Text Effect

    On dark backgrounds offset the shadow (on the Y-axis) underneath the text with a light colour, whereas on light backgrounds offset (again on the Y-axis) to the top of the text with a darker shadow color.

    Letterpress Text Effect

    body {
    	background: #474747;
    }
    h1 {
    	color:#222;
    	text-shadow: 0px 2px 3px #666;
    }
    

    Your Turn To Talk

    Which one is your favorite text effect?

    Our self paced training courses MB3-216 and high quality MB6-291 provide you definite guarantee for passing the 77-601 real exam. If you get through 70-291 exams, you will find other.

    Authored by

    Web Designer, Blogger, M.Sc in Electronic Engineering from Nis, Serbia. Founder of webexpedition18.com. You can find me on Twitter.

    Enjoyed this story?

    Please leave your comment about this post on the comment section below. If you liked it tell your friends by tweeting it. You can also subscribe to our feed by rss or email.

  • http://www.xpertdeveloper.com Avi

    Awesome dude.. Excellent work by the people….

  • http://portefolio.net/ seb

    Thank you, I love the retro text effect! Merci beaucoup :)

  • http://www.colorexpertsbd.com/ Clipping Path

    You have done a great work thanks a lot for sharing :-)

  • http://motionaudio7.com Geoff McMahen

    Very nice work, thanks for sharing!

  • http://www.the-triumph.com Web Design Company Mumbai

    Thanks for the short Tutorial

  • http://www.psd-dude.com PsdDude

    great article, I will try them all on my blog design, thanks!!!

  • http://www.logodesignstemplate.com/busybee/ Magzine Wordpress Theme

    Great Effects! thanks for their coding! i will utilize them, thanks