Text-shadow

CSS

Генератор

Заголовок

<h2 style="text-align:center;text-shadow:0px 1px 1px rgba(255,255,2555,0.75),0px -1px 1px rgba(0,0,0,.75);font-family:Helvetica,Arial,sans-serif;font-size:50px;text-transform:uppercase;color:#999;">Заголовок</h2>

Заголовок

<h2 style="font-family:Segoe Print;font-size:50px;color:#333;text-align:center;text-shadow:0 2px 5px rgba(0, 0, 0, .5);">Заголовок</h2>

Заголовок

<h2 style="color: #eee;font-family:Segoe Print;text-align:center;font-size:50px;
    text-shadow:-1px -1px 0 rgba(51, 51, 51, 1),1px -1px 0 rgba(51, 51, 51, 1),-1px 1px 0 rgba(51, 51, 51, 1),1px 1px 0 rgba(51, 51, 51, 1);">Заголовок</h2>

Заголовок

<h2 style="font-family:Segoe Print;text-align:center;font-size:50px;"><span style="color:blue;text-shadow:6px 6px 12px blue;">З</span><span style="color:green;text-shadow:6px 6px 12px green;">а</span><span style="color:red;text-shadow:6px 6px 12px red;">г</span><span style="color:yellow;text-shadow:6px 6px 12px yellow;">о</span><span style="color:blue;text-shadow:6px 6px 12px blue;">л</span><span style="color:green;text-shadow:6px 6px 12px green;">о</span><span style="color:red;text-shadow:6px 6px 12px red;">в</span><span style="color:yellow;text-shadow:6px 6px 12px yellow;">о</span><span style="color:blue;text-shadow:6px 6px 12px blue;">к</span></h2>

Заголовок

<h2 style="color:#2F4F4F;font-family:Segoe Print;text-align:center;font-size:50px;text-shadow:6px 6px 12px #000;">Заголовок</h2>

Заголовок

<h2 style="color:#2F4F4F;font-family:Segoe Print;text-align:center;font-size:50px;text-shadow:1px 1px #fff,-1px 1px #fff,1px -1px #fff,-1px -1px #fff,1px 1px 5px #555;">Заголовок</h2>

Заголовок

<h2 style="color:#2F4F4F;font-family:Segoe Print;text-align:center;font-size:50px;-webkit-text-stroke: 1px black;color:white;text-shadow:2px 2px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;">Заголовок</h2>

Заголовок

<h2 style="color:#2F4F4F;font-family:Segoe Print;text-align:center;font-size:50px;color:#9c8468;opacity: 0.8;line-height:1;padding:0;text-shadow:-1px -1px 1px #fff,1px 1px 1px #000;">Заголовок</h2>

Заголовок

<h2 style="color:#2F4F4F;font-family:Segoe Print;text-align:center;font-size:50px;color:grey;text-shadow:2px 0 0 #000,-2px 0 0 #000,0 2px 0 #000,0 -2px 0 #000,1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 5px #000;">Заголовок</h2>

Заголовок

<h2 style="color:#2F4F4F;font-family:Segoe Print;text-align:center;font-size:50px;background:#8A3DAD;line-height:1em;color:transparent;
  text-shadow:0px 2px 3px rgba(255,255,255,0.3);-webkit-background-clip:text;-moz-background-clip:text;background-clip:text;">Заголовок</h2>

Заголовок

<h2 style="color:#2F4F4F;font-family:Segoe Print;text-align:center;font-size:30px;color:#777;text-shadow:0px 1px 0px #e5e5ee;">Заголовок</h2>

Lorem ipsum

Источник
.inner1 {
    margin: 0;
    background: #0A539C;
    background: linear-gradient(top, #4293d6 0%,#001e96 100%);
    overflow: hidden;
}

.depth {
    display: block;
    padding: 50px;
    color: black;
    font: bold 7em Arial, sans-serif;
    position: relative;
}

.depth:before, .depth:after {
    content: attr(title);
    padding: 50px;
    color: rgba(255,255,255,.1);
    position: absolute;
}

.depth:before { top: 1px; left: 1px }
.depth:after  { top: 2px; left: 2px }
<div class="inner1"><h1 class="depth" title="Lorem ipsum">Lorem ipsum</h1></div>

Get your own

Источник
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic);

h1.inner2 {
  font: bold 6em 'open sans condensed';
  text-align: center;

  /** This is where the magic happens **/
  background-color: rgba(204,129,0,.9);
  text-shadow: 0px 2px 5px #f9c800;
  color: transparent;
  -webkit-background-clip: text;
}
<h1 class="inner2">Get your own</h1>

Заголовок

<div style="background: #f2f2f2;text-align: center;"><h2 style="background-color: #565656;
  font: bold 48px 'Futura';
  color: transparent;
  text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.8);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;">Заголовок</h2></div>

Заголовок

<h2 style="color:#2F4F4F;font-family:Segoe Print;text-align:center;font-size:50px;color:#777;text-shadow:0 1px 1px rgba(255, 255, 255, 0.5);">Заголовок</h2>

Заголовок

<h2 style="font-family:Segoe Print;text-align:center;color: rgba(252, 195, 67, 0.8);
    font-size: 48px;
    text-shadow: 1px 2px 3px #fff, 0 0 0 #000;">Заголовок</h2>

Заголовок

<h2 style="color:#2F4F4F;font-family:Segoe Print;text-align:center;font-size:50px;color: #C8C8C8;
    text-shadow: 1px 1px white, -1px -1px #444;
    letter-spacing: 2px;">Заголовок</h2>

Заголовок

Link
<h2 style="color:#2F4F4F;font-family:Segoe Print;text-align:center;font-size:50px;color: #D1D1D1;
    text-shadow: -1px -1px white, 1px 1px #333;
    letter-spacing: 2px;">Заголовок</h2>

Заголовок

<h2 style="color:#2F4F4F;font-family:Segoe Print;text-align:center;font-size:50px;background-color: #666666;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;">Заголовок</h2>

Заголовок

<h2 style="color:#2F4F4F;font-family:Segoe Print;text-align:center;font-size:50px;color: rgba(0,0,0, 0.6);text-shadow: 1px 1px 1px #fff, 0 0 1px rgba(0,0,0,0.6);">Заголовок</h2>

Заголовок

<h2 style="font-family: Helvetica, Arial, sans-serif;
    text-align:center;
    font-weight: bold;
    font-size: 6em;
    line-height: 1em;
    /* Shadows are visible under slightly transparent text color */
    color: rgba(0,0,0,0.6);
    text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);">Заголовок</h2>

Заголовок

<h2 style="font-family:Segoe Print;text-align:center;font-size:50px;color:#777;text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);">Заголовок</h2>

Заголовок

<h2 style="font-family:Segoe Print;text-align:center;font-size:50px;color:#777;text-shadow: 1px 1px transparent, -1px -1px black;">Заголовок</h2>

Заголовок

<h2 style="color:#2F4F4F;font-family:Segoe Print;text-align:center;font-size:50px;text-shadow: 3px 3px 0px rgba(63,107,169, 0.5);">Заголовок</h2>

Blinking Text Shadow CSS3

@-webkit-keyframes myfirst
{
    from {text-shadow: 3px 3px 5px #ba8b00;}
    to {text-shadow : none;}
}

@-moz-keyframes myfirst
{
    from {text-shadow: 3px 3px 5px #ba8b00;}
    to {text-shadow : none;}
}
@keyframes myfirst
{
    from {text-shadow: 3px 3px 5px #ba8b00;}
    to {text-shadow : none;}
}

.title {
    color: #ba8b00;
    padding: 25px 0 30px 0;
    width: 560px;
    font-size: 42px;
    text-shadow: 3px 3px 5px #ba8b00;
    -webkit-animation: myfirst 1s 98765432;
    -moz-animation: myfirst 1s 98765432;
    animation: myfirst 1s 98765432;
}
<h2 class="title">Blinking Text Shadow CSS3</h2>

Заголовок

<h2 style="font-family:Segoe Print;text-align:center;font-size:50px;color:#777;text-shadow: 2px 2px 2px #000;">Заголовок</h2>

Заголовок

<h2 style="font-family:Segoe Print;text-align:center;font-size:50px;color:#a9a9a9;text-shadow: -1px -1px rgba(0, 0, 0, 0.6);">Заголовок</h2>

CLASSIC LETTERPRESS

<div style="background: #35302B;padding: 40px 0;"><h2 style="font-family:Segoe Print;text-align:center;font-size:50px;text-shadow: 0px 1px 1px #4d4d4d; color: #222;">CLASSIC LETTERPRESS</h2></div>

EMBOSSED TEXT

<div style="background: #A47A56;padding:40px 0;"><h2 style="font-family:Segoe Print;text-align:center;font-size:50px;text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000; color: #9c8468; opacity: 0.3;">EMBOSSED TEXT</h2></div>

Articoli correlati