3D CSS Shadow Text Tutorial

41 CommentsOn: 3D CSS Shadow Text Tutorial

3D-css-shadow-text-tutorial

This easy CSS text shadow tutorial will show you step by step how to create 3D font with multiple css shadows by stacking multiple CSS3 text shadow properties, then go a step further and use the CSS text transform and CSS transition properties to make the 3D text pop out / zoom on hover!

Please keep in mind this 3D CSS text shadow effect is pure CSS (No JavaScript) and the technique only fully works in modern browsers like Firefox, Chrome, Safari and Opera, It will fall back gracefully to plain text when viewed in any Internet Explorer browser.

View Demo

How CSS shadow text works

To create this 3D CSS shadow text effect we are going to use the CSS 3 text-shadow property, this is how text-shadow works:

.example-class
{
	text-shadow: [X offset] [Y offset] [Blur size] [Colour];
}

Stacking multiple CSS Shadows

You don’t have to stack multiple css shadows but it does create a better looking 3D CSS text effect.

multiple css shadows

The Tutorial (Creating the 3D CSS text shadow)

You will want to pick colours darker than the original text colour for the shadow, so for this example I will be using white text, with a 2 level deep grey shadow, followed by a 4 level deep near black shadow to create that 3D text illusion.

For this example I’m going to target a H2 tag, but you can target any HTML element, link, class, ID etc.

h2
{
	text-shadow:
	1px 1px 0 #CCC,
	2px 2px 0 #CCC, /* end of 2 level deep grey shadow */
	3px 3px 0 #444,
	4px 4px 0 #444,
	5px 5px 0 #444,
	6px 6px 0 #444; /* end of 4 level deep dark shadow */
}

css-shadow-text

Well, you can stop there if you like, you have your basic 3D CSS text illusion, using multiple shadows.
However, let’s go two steps further and make the text size increase on hover by using the CSS text transform property to have the 3D text pop out / zoom in & out on hover! Then have it fade in and out smoothly with a CSS transition, pure CSS3, no JavaScript required!

Increasing text size on hover with CSS text transform

h2:hover
{
 	/* CSS3 Transform Effect */
  	-webkit-transform: scale(1.2);     /* Safari & Chrome */
  	-moz-transform: scale(1.2);        /* Firefox */
  	-o-transform: scale(1.2);          /* Opera */
}

css3-text-shadow

You can make the text bigger by changing the (1.1) value, (2.0) would be double the original size.
This instant CSS text transform on hover could use some improvement however, so we are going to make it fade in and fade out over a few milliseconds.

Making the cSS transition on hover smooth

h2
{
	/* CSS3 Transition Effect */
	-webkit-transition: all 0.12s ease-out;		/* Safari & Chrome */
	-moz-transition: all 0.12s ease-out;		/* Firefox */
	-o-transition: all 0.12s ease-out;		/* Opera */
}

Now the text size grows larger on hover and goes back to it’s normal state in a smooth CSS transition, you can increase or lower the speed by changing the 0.12s value.

View Demo That’s it! You’ve created your 3D CSS shadow text effect with multiple css shadows!

Share or Save!

sawebdesigns
April 20, 2011 at 3:53 am #1

its really that easy thanks

faycal
April 26, 2011 at 5:47 pm #2

Great tutorial, simple and concise and very useful thanks a lot.:)

3D text effect using CSS3 | mycommunitycreative
April 29, 2011 at 9:07 pm #3

[...] If you want more details of how it works, check-out the tutorial by pgwebdesign [...]

HTML5: Typographic Effects
May 16, 2011 at 8:21 am #4

[...] … and many other fun effects using a CSS->Canvas converter (CSS sourced from Line25, and Stereoscopic, and Shadow 3D) [...]

30 Useful and Cutting Edge CSS3 Text Effect and Web Typography Tutorials
May 21, 2011 at 12:02 pm #5

[...] 26. 3D CSS Shadow Text Tutorial [...]

30 Useful and Cutting Edge CSS3 Text Effect and Web Typography Tutorials | vsagrafica.com
May 28, 2011 at 9:06 am #6

[...] differs from others because besides default text-shadow it also uses inner shadow property.26. 3D CSS Shadow Text TutorialThis easy CSS text shadow tutorial will show you step by step how to create 3D font with multiple [...]

30 Useful and Cutting Edge CSS3 Text Effect and Web Typography Tutorials | Revo2.0 Mkt
May 30, 2011 at 9:36 pm #7

[...] 26. 3D CSS Shadow Text Tutorial [...]

tehtehtehteh
June 10, 2011 at 9:34 pm #8

Yeah during the animation the shadow effects arent there…. ‘nice’.

tehtehtehteh
June 10, 2011 at 9:35 pm #9

If you move the mouse quickly from on/off the text you can see it is merely white text with the drop shadow when it is :active?

I’m not sure…

Typographic effects in canvas HTML5 » Example Codes
June 19, 2011 at 6:16 pm #10

[...] To get things started, let’s see how <canvas> can emulate CSS effects. Searching through Google images for “css text-shadow” led to a few great demos for us to emulate; Line25, and Stereoscopic, and Shadow 3D. [...]

kontoLngaceng
August 19, 2011 at 11:21 am #11

good tutorial

Sam
August 24, 2011 at 10:05 am #12

Thank you for this. I haven’t seen much on using multiple shadows. You made it super easy to understand :)

10 Nouveau CSS3 Text Effect and Web Typography Tutorials | jQuery4u
January 4, 2012 at 11:01 pm #13

[...] Source Demo [...]

20个最佳CSS3文字效果教程|CSS3|开发技术|代码狂人
January 5, 2012 at 6:03 am #14

[...] 13、3D CSS3阴影文字教程 3D CSS阴影文字教程 [...]

20个值得收藏的CSS3文字效果教程 | Web开发之道
January 31, 2012 at 5:10 pm #15

[...] was made in Photoshop 11. CSS Custom Fonts Tutorial  12. I Heart Blur  13. 3D CSS Shadow Text Tutorial  14. How to Create Inset Typography with CSS3  15. How to Create a Cool [...]

Eli Mitchell
February 13, 2012 at 11:46 pm #16

Excellent tutorial! I had never thought of using multiple text shadows to create a smooth 3D effect like that.

Filippo Stefano Curriculum
February 26, 2012 at 6:36 pm #17

[...] 3D CSS Shadow Text Tutorial                      35 Fantasy Art Masterpieces of character design history   [...]

30 Adet CSS tipografi Uygulaması | Paylaş Gelsin
February 27, 2012 at 10:06 pm #18

[...] 26. 3D CSS Shadow Text Tutorial [...]

20个最佳CSS3文字效果教程 | html5学习网 html5资讯 html5教程
April 13, 2012 at 2:55 am #19

[...] 13、3D CSS3阴影文字教程 3D CSS阴影文字教程 [...]

CSS Magic 21 Cool CSS3 Text Effects Tutorials | Web Help 101
May 1, 2012 at 7:23 pm #20

[...] 3D CSS Shadow Text Tutorial [...]

Putri
May 9, 2012 at 4:03 pm #21

I like to use css3, but its to risk, because not all browser support css3. Can you give me suggestion?

5 Most Important Brandable CSS/ HTML Elements | Creativa Club
May 13, 2012 at 12:19 am #22

[...] 3D CSS Shadow Text Tutorial - Ever wonder how to make your header text look 3D and pop out with you hover your mouse over it? Try this phenomenal tutorial! Keep in mind that this could also be a great effect for header text. [...]

- WebDesignR
May 28, 2012 at 4:49 pm #23

[...] 26. 3D CSS Shadow Text Tutorial [...]

Huynh Hieu
May 30, 2012 at 6:13 am #24

thanks, good effect for website design

Jesse
June 9, 2012 at 12:23 am #25

Great tutorial but does not work in i.e. Do you have a solution for i.e?

20个值得收藏的CSS3文字效果教程 | 莲娜用户体验研究日志 Lyna UED
June 11, 2012 at 10:28 am #26

[...] 13. 3D CSS Shadow Text Tutorial [...]

10 Cool And Fresh CSS3 Text Effects Tutorials - Cổng thông tin trao đổi kiến thức Website
July 31, 2012 at 8:45 pm #27

[...] 3D CSS Shadow Text Tutorial [...]

20个值得收藏的CSS3文字效果教程 | 站长站
November 17, 2012 at 2:13 am #28

[...] 13. 3D CSS Shadow Text Tutorial [...]

Sale Viet Nam
November 25, 2012 at 5:59 pm #29

I don’t even know how I finished up here, but I believed this submit used to be great. I do not understand who you’re but definitely you’re going to a well-known blogger should you aren’t already. Cheers!

Ymmot23
December 14, 2012 at 11:53 am #30

Love your pics thanks for all the tips I see yove been yousing weebly great site.

50 Cool text effects in CSS3 « Kỹ Thuật Lập Trình ASP.NET
January 25, 2013 at 11:23 am #31

[...] 6) 3D CSS Shadow Text [Tutorial] [...]

50 Tutorial Efek Teks Keren dengan CSS3 - CSS-weaver
March 5, 2013 at 6:39 am #33

[...] 3D CSS Shadow Text [Tutorial] [...]

CQ
March 27, 2013 at 3:50 pm #34

Very nice,looking for this

25 Awesome CSS3 Text Effect Tutorials - Streetsmash
April 21, 2013 at 6:25 pm #35

[...] Visit Source – by PG Web Design [...]

如何利用CSS3制作3D文字效果 - iew3c
May 2, 2013 at 2:53 pm #36

[...] 下面这篇教程是教你如何用CSS3来制作3D效果的文字,文章翻译自3D CSS Shadow Text Tutorial。 [...]

21 efeitos css3 em textos | TruiZz - Serviços de design, websites e redes sociais
June 7, 2013 at 11:06 pm #37

[...] 3D CSS Sombra Tutorial Texto [...]

25 Bài Hướng Dẫn Tạo Hiệu Ứng Chữ Đẹp với CSS3 | LamWeb.com
June 16, 2013 at 7:29 pm #38

[...] Xem Hướng Dẫn [...]

html5 web developers
December 16, 2013 at 2:54 am #39

Incredible, great web site composition! The best way extended were you blogging and site-building with regard to? you will be making posting glance simple. The entire glance of one’s website is great, let alone necessary . material!

30 Useful and Cutting Edge CSS3 Text Effect and Web Typography Tutorials - 313onlinedesign en las nubes
March 13, 2014 at 8:40 pm #40

[...] 26. 3D CSS Shadow Text Tutorial [...]

10个新鲜的CSS3文本效果制作与Web排版教程推荐 | 微动力吧
March 30, 2014 at 2:10 am #41

[...] 教程 / 演示 [...]

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>