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!
text-shadow: h-shadow v-shadow blur color;
.ex1 { text-shadow: 0 0 5px #fff, 0 -5px 5px #ccc, 2px -10px 6px #ddd, -2px -15px 11px #eee, 2px -18px 18px #fff; }
.ex2 { text-shadow: 1px 1px 7px #fff, -1px -1px 11px #fff, 0 0 17px #fff; }
.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; }
.ex4 { text-shadow: 0 0 5px #fff; }
.ex5 { text-shadow: 0 1px 1px #4d4d4d; }
.ex6 { text-shadow: -1px -1px 1px rgba(255,255,255,0.2), 1px 1px 1px rgba(0,0,0,0.6); }
.ex7 { text-shadow: 0 -1px 3px #fff, 0 -2px 11px #fff82d, 0 -7px 17px #ff8000, 0 -11px 33px #fe0606; }
.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; }
.ex9 { text-shadow: -5px 5px 5px rgba(0,0,0,0.3); }
.ex10 { text-shadow: 1px 3px 6px #a3d0b0, 0 0 0 #000, 1px 3px 6px #a3d0b0; }
.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; }
.exa { text-shadow: 0 1px 1px #000; }
.exb { text-shadow: 1px 1px 0 #fff; }
.exc { text-shadow: 1px 1px 0 #000; }
.exd { text-shadow: 2px 2px 3px #000; }
.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; }