So fügen Sie Text einen Schatten hinzu

Textschatten hinzufügen

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

Die Eigenschaft text-shadow akzeptiert mehrere Werte:

• Den Versatz auf der x-Achse
• Den Versatz auf der y-Achse
• Einen Unschärferadius
• Eine Farbe

Im folgenden Beispiel haben wir den Versatz auf der x-Achse auf 2px, den Versatz auf der y-Achse auf 4px, den Unschärferadius auf 4px und die Farbe auf ein halbtransparentes Blau gesetzt. Probieren Sie verschiedene Werte aus, 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);
}