Text-Schatten mit text-shadow

Dezenter Text-Schatten mit geringem Versatz

Text-Schatten

.text {
text-shadow:1px 1px 5px #888;
}

Text-Schatten mit Versatz nach rechts unten

Text-Schatten

.text {
text-shadow:5px 5px 10px #888;
}

Gelber Text-Schatten

Text-Schatten

.text {
text-shadow:0 0 10px yellow;
}

Text-Schatten ohne Blur-Radius

Text-Schatten

.text {
color:#ffffff;
text-shadow:0 1px 0 #888;
}

Kombination mehrerer Text-Schatten ohne Blur-Radius

Text-Schatten

.text {
color: #000;
text-shadow: 1px 1px 0 #eee, 2px 2px 0 #000
}

Invertierter Text-Schatten bei dunkler Schrift

Text-Schatten

.text {
background:#666;
color: #222;
text-shadow: 0px 2px 3px #888;
}

Glühender Text-Schatten

Text-Schatten

.text {
color: #ffffff;
background: #000;
text-shadow: 1px 1px 15px #ffffff;
}

Text-Schatten eingraviert

Text-Schatten

.text {
color: #666;
background: #000;
text-shadow: 0px 1px 0px #ccc;
}

Text-Schatten graviert

Text-Schatten

.text {
color: #666;
background: #000;
text-shadow: 2px 2px 5px #ffffff;
}

Neon-Effekt durch Kombination mehrerer Text-Schatten

Text-Schatten

.text {
color: #ffffff;
overflow: hidden;
background: #000;
text-shadow: 0 0 20px #ffffff, 2px 2px 10px #ffffff,
2px 2px 10px #ff00de, 2px 2px 40px #ff00de,
2px 2px 70px #ff00de, 2px 2px 80px #ff00de,
2px 2px 100px #ff00de;
}

Outline-Text

Text-Schatten

.text {
color: #000;
background: #000;
text-shadow: 0 0 5px #ffffff;
}

Verschmierter Hintergrund

Text-Schatten

.text {
color: #000;
text-shadow: 0 0 50px #000;
}

3D-Text durch Kombination mehrerer Textschatten

Text-Schatten

.text {
color: #fff;
text-shadow: 1px 0px 1px #ccc, 0px 1px 1px #eee,
2px 1px 1px #ccc, 1px 2px 1px #eee,
3px 2px 1px #ccc, 2px 3px 1px #eee,
4px 3px 1px #ccc, 3px 4px 1px #eee,
5px 4px 1px #ccc, 4px 5px 1px #eee,
6px 5px 1px #ccc, 5px 6px 1px #eee,
7px 6px 1px #ccc;
}

Retro-Text durch Kombination mehrerer Textschatten

Text-Schatten

.text {
color: #333;
text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;
}

↑ Seitenanfang