So fügen Sie einem Text einen Schatten hinzu

In unserem Leitfaden zum Hinzufügen eines Schattens zu Boxen können Sie herausfinden, wie Sie einem beliebigen Element auf Ihrer Seite einen Schatten hinzufügen. Diese Technik fügt jedoch nur Schatten zum umgebenden Kasten des Elements hinzu. Um einen Schlagschatten für den Text innerhalb des Kastens hinzuzufügen, benötigen Sie eine andere CSS-Eigenschaft — text-shadow.

Die Eigenschaft text-shadow nimmt eine Anzahl von Werten an:

• Die Verschiebung auf der x-Achse
• Die Verschiebung auf der y-Achse
• Ein Weichzeichnungsradius
• Eine Farbe

Im untenstehenden Beispiel haben wir die x-Achsen-Verschiebung auf 2px, die y-Achsen-Verschiebung auf 4px, den Weichzeichnungsradius auf 4px und die Farbe auf ein halbtransparentes Blau gesetzt. Experimentieren Sie mit den verschiedenen Werten, um zu sehen, wie sie den Schatten 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);
}