CSS3 text-shadow examples

CSS3’s text-shadow property makes it easy to style text content. These simple copy/paste examples show some cool text-shadow effects for those already familiar with CSS. Check out my CSS text-shadow tutorial to learn more!

Syntax

text-shadow: h-shadow v-shadow blur color;

Examples

Ghost text
Domo arigato, Mr. Roboto
.ex1 { text-shadow: 0 0 5px #fff, 0 -5px 5px #ccc, 2px -10px 6px #ddd, -2px -15px 11px #eee, 2px -18px 18px #fff; }

Glowing text
Domo arigato, Mr. Roboto
.ex2 { text-shadow: 1px 1px 7px #fff, -1px -1px 11px #fff, 0 0 17px #fff; }

Neon glow
Domo arigato, Mr. Roboto
.ex3 { text-shadow: 0 0 3px #fff, 0 0 7px #fff, 0 0 11px #fff, 0 0 17px #2dff2d, 0 0 27px #2dff2d, 0 0 37px #2dff2d, 0 0 47px #2dff2d, 0 0 77px #2dff2d; }

Softer glow
Domo arigato, Mr. Roboto
.ex4 { text-shadow: 0 0 5px #fff; }

Abyss channel
Domo arigato, Mr. Roboto
.ex5 { text-shadow: 0 1px 1px #4d4d4d; }

Embossed text
Domo arigato, Mr. Roboto
.ex6 { text-shadow: -1px -1px 1px rgba(255,255,255,0.2), 1px 1px 1px rgba(0,0,0,0.6); }

Barbecue
Domo arigato, Mr. Roboto
.ex7 { text-shadow: 0 -1px 3px #fff, 0 -2px 11px #fff82d, 0 -7px 17px #ff8000, 0 -11px 33px #fe0606; }

Headline rising
Domo arigato, Mr. Roboto
.ex8 { text-shadow: 0 1px 0 #999, 0 2px 0 #888, 0 3px 0 #777, 0 4px 0 #666, 0 5px 0 #555, 0 6px 0 #444, 0 7px 0 #333, 0 8px 7px #000b21; }

Drop shadow
Domo arigato, Mr. Roboto
.ex9 { text-shadow: -5px 5px 5px rgba(0,0,0,0.3); }

Inset text
Domo arigato, Mr. Roboto
.ex10 { text-shadow: 1px 3px 6px #a3d0b0, 0 0 0 #000, 1px 3px 6px #a3d0b0; }

Inset text
Domo arigato, Mr. Roboto
.ex11 { text-shadow: 0 1px #808d93, -1px 0 #cdd2d5, -1px 2px #808d93, -2px 1px #cdd2d5, -2px 3px #808d93, -3px 2px #cdd2d5, -3px 4px #808d93, -4px 3px #cdd2d5, -4px 5px #808d93, -5px 4px #cdd2d5, -5px 6px #808d93, -6px 5px #cdd2d5, -6px 7px #808d93, -7px 6px #cdd2d5, -7px 8px #808d93, -8px 7px #cdd2d5; }

More examples..

Domo arigato, Mr. Roboto
.exa { text-shadow: 0 1px 1px #000; }

Domo arigato, Mr. Roboto
.exb { text-shadow: 1px 1px 0 #fff; }

Domo arigato, Mr. Roboto
.exc { text-shadow: 1px 1px 0 #000; }

Domo arigato, Mr. Roboto
.exd { text-shadow: 2px 2px 3px #000; }

Domo arigato, Mr. Roboto
.exe { text-shadow: -3px 3px 3px rgba(0,0,0,0.5); }

Pro Tip: hide text shadows when the user selects some text on the page:

*::selection         { text-shadow: none; }
*::-moz-selection    { text-shadow: none; }
*::-webkit-selection { text-shadow: none; }