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.

7 Comments
ADD COMMENT
  • Avi says:

    September 12, 2011

    Awesome dude.. Excellent work by the people….

  • seb says:

    September 12, 2011

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

  • Clipping Path says:

    September 13, 2011

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

  • Geoff McMahen says:

    September 13, 2011

    Very nice work, thanks for sharing!

  • Web Design Company Mumbai says:

    September 15, 2011

    Thanks for the short Tutorial

  • PsdDude says:

    September 17, 2011

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

  • Magzine Wordpress Theme says:

    September 24, 2011

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