Wie man einem Text einen Schatten hinzufügt

Unser Leitfaden zum Hinzufügen eines Schattens zu Boxen erklärt, wie Sie einem beliebigen Element auf Ihrer Seite einen Schatten hinzufügen können. Diese Technik fügt jedoch nur Schatten zum umgebenden Rahmen des Elements hinzu. Um einen Schlagschatten direkt dem Text hinzuzufügen, benötigen Sie eine andere CSS-Eigenschaft: text-shadow.

Die Eigenschaft text-shadow nimmt mehrere Werte an:

• Der Versatz auf der x-Achse
• Der Versatz auf der y-Achse
• Ein Unschärferadius
• Eine Farbe

Im folgenden Beispiel haben wir den x-Achsen-Versatz auf 2px, den y-Achsen-Versatz auf 4px, den Unschärferadius auf 4px und die Farbe auf ein halbtransparentes Blau gesetzt. Experimentieren Sie mit den verschiedenen Werten, um zu sehen, wie sie den Schatteneffekt verändern.

<div class="wrapper">
  <h1>Adding a shadow to text</h1>
</div>

h1 {
  color: royalblue;
  text-shadow: 2px 4px 4px rgb(46 91 173 / 0.6);
}