Textschatten-Generator (text-shadow)

Geben Sie Ihren Text ein, passen Sie den Schatten mit den Reglern an und kopieren Sie den text-shadow-Code. Mit mehreren Ebenen erzielen Sie Neon-Effekte, 3D-Buchstaben, Umrisse oder geprägten Text.

So funktioniert text-shadow

text-shadow erhält den horizontalen und vertikalen Versatz, die Unschärfe und die Farbe des Schattens, zum Beispiel 2px 2px 4px rgba(0, 0, 0, 0.4). Anders als box-shadow gibt es keine Ausdehnung und kein inset, und der Schatten folgt der Form jedes Buchstabens.

Wie bei box-shadow lassen sich mehrere Schatten durch Kommas getrennt kombinieren; der erste liegt oben. So entstehen die Effekte der Beispiele: Neon stapelt Schatten ohne Versatz mit zunehmender Unschärfe, 3D addiert scharfe Schatten, die Pixel für Pixel versetzt sind, und Umriss setzt vier scharfe Schatten rund um den Buchstaben.

Lesbarkeit

Ein weicher Schatten hilft, Text auf einem Foto zu lesen, doch kräftige Schatten in langen Absätzen ermüden die Augen. Setzen Sie sie für Überschriften und Schaltflächen ein und prüfen Sie immer den Kontrast zwischen Text und Hintergrund.