Эффекты CSS text-shadow

Свойство text-shadow в CSS3 позволяет задавать:

• смещение тени по отношению к тексту по осям X и Y — X-offset и Y-offset;
• уровень размытия тени (хотя может быть в данном случае лучше подходит термин – растушевка) — blur;
• цвет тени — color:

Вы может так же задавать несколько значений для каждого параметра. Это даёт вам простор для творчества.

Эффект “Ретро”

Esty Web Studio Saint-Petersburg

font-size: 50px; color: #9C1414; font-weight: bold; 
text-shadow: 3px 3px 0px rgba(255, 255, 255, .8), 6px 6px 0px rgba(187, 187, 187, 0.5);

3D Эффект

Esty Web Studio Saint-Petersburg

font-size: 50px; color: #FFF; font-weight: bold; 
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);

Эффект Контур

Esty Web Studio Saint-Petersburg

font-size: 80px; color: #FFF; font-weight: bold; 
text-shadow:-2px -2px 0 #777, 2px 2px 0 #777, 2px -2px #777, -2px 2px #777,
 -2px -2px 2px #777, 2px 2px 2px #777, -2px 2px 2px #777, 2px -2px 2px #777 ;

Вдавленный текст

line-height:100px; padding:20px; font-size: 60px;
 color: #444; text-shadow: 1px 1px 1px #777, -1px -1px 1px #222;

Эффект Aнаглиф

Esty Web Studio Saint-Petersburg

font-size: 50px; color: #333; text-shadow: -4px 0 1px #77664B, 4px 0 1px #ECDAC4 ;

Неоновый текст

line-height:100px; padding:20px; font-size: 60px; color: #407ec4;
   text-shadow: 1px 1px 0 #4da2fc, -1px -1px 0 #4da2fc,     
   1px -1px 0 #4da2fc, -1px 1px 0 #4da2fc,     4px 4px 8px #2c5889, -4px 4px 8px #2c5889, 
       4px -4px 8px #2c5889, -4px -4px 8px #2c5889;

Эффект Радуга

Esty Web Studio Saint-Petersburg

font-size: 50px; color: rgba(0, 0, 0, 0);
text-shadow: 2px 0 0 #d91f26, 4px 0 0 #e25b0e,   
  6px 0 0 #f5dd08, 8px 0 0 #059444,     10px 0 0 #0287ce, 12px 0 0 #044d91,    
   14px 0 0 #2a1571;

Поддержка браузеров

IE	Opera	Chrome	Firefox	Safari
Internet Explorer 10	Opera 9.5 и выше	Chrome 2 и выше	Firefox 3.5 и выше	Safari 1.1 и выше