Anleitung zum Hinzufügen eines Schattens zu Text

In unserem Leitfaden zum Hinzufügen eines Schattens zu Boxen erfahren Sie, wie Sie jedem Element auf Ihrer Seite einen Schatten hinzufügen können. Diese Technik fügt jedoch nur Schatten zu dem das Element umgebenden Rahmen hinzu. Um einen Schlagschatten zum Text innerhalb des Rahmens hinzuzufügen, benötigen Sie eine andere CSS-Eigenschaft — text-shadow.

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

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

Im folgenden Beispiel haben wir die Verschiebung auf der x-Achse auf 2px, die y-Achse 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);
}