text-shadow CSS Generator 2024




1px
4px
3px
29px
1px
#c1c8bc
#000000
#000000



Text mit Schlagschatten



CSS-Code:

text-shadow: 1px 4px 3px #c1c8bc; -webkit-text-stroke: 1px #000000; color: #000000; font-size: 29px;

Ad

Was ist ein CSS text-shadow Generator?

Ein CSS Text Shadow Generator ist ein Online-Tool, das dir hilft, CSS-Code für Textschatten zu erstellen. Mit diesem Generator kannst du visuell und interaktiv verschiedene Schatteneffekte für Text gestalten und den dazugehörigen CSS-Code generieren, den du dann in deine Webprojekte einfügen kannst!!

  1. Textschatten erstellen: Du kannst Schatten für Text erstellen, indem du Parameter wie die Farbe, den Versatz (horizontal und vertikal), die Unschärfe und die Transparenz einstellst.
  2. Design anpassen: Durch Anpassung der verschiedenen Parameter kannst du den Schatteneffekt genau an deine Designanforderungen anpassen. Dies ermöglicht dir, einzigartige und ansprechende Texteffekte zu gestalten.
  3. Echtzeit-Vorschau: Viele Generatoren bieten eine Echtzeit-Vorschau des Textes mit dem angewendeten Schatten, sodass du sofort siehst, wie der Effekt auf deiner Website aussehen wird.
  4. Einfacher CSS-Code: Der Generator liefert dir den fertigen CSS-Code, den du einfach kopieren und in deine Stylesheets einfügen kannst, ohne den Code manuell schreiben zu müssen.

Typische Parameter eines Text Shadow Generators:

  • Text: Der anzuzeigende Text.
  • Textfarbe: Die Farbe des Textes.
  • Schattensfarbe: Die Farbe des Schattens.
  • Horizontaler Versatz (X): Verschiebung des Schattens in horizontaler Richtung.
  • Vertikaler Versatz (Y): Verschiebung des Schattens in vertikaler Richtung.
  • Unschärferadius: Der Grad der Unschärfe des Schattens.
  • Transparenz/Opacity: Die Transparenz des Schattens.

Beispiel für einen generierten CSS-Code:

CSS
.text-shadow {
    text-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);
}

Dieser Code würde einen Schatten mit einem horizontalen Versatz von 2 Pixeln, einem vertikalen Versatz von 4 Pixeln, einer Unschärfe von 5 Pixeln und einer Transparenz von 30% anwenden.

Wie funktioniert der text-shadow in CSS?

Mit text-shadow kannst du Schatteneffekte auf Texten erstellen. Diese Eigenschaft kann bis zu vier Werte enthalten, die den Schatten definieren.

Syntax

CSS
text-shadow: horizontal-offset vertical-offset blur-radius color;

Parameter

Horizontaler Versatz (horizontal-offset):

  • Gibt an, wie weit der Schatten nach rechts (positive Werte) oder nach links (negative Werte) verschoben wird.
  • Beispiel: 2px verschiebt den Schatten 2 Pixel nach rechts.

Vertikaler Versatz (vertical-offset):

  • Gibt an, wie weit der Schatten nach unten (positive Werte) oder nach oben (negative Werte) verschoben wird.
  • Beispiel: 4px verschiebt den Schatten 4 Pixel nach unten.

Unschärferadius (blur-radius) (optional):

  • Bestimmt den Grad der Unschärfe des Schattens. Ein höherer Wert erzeugt einen weicheren, verschwommenen Schatten.
  • Beispiel: 5px erzeugt einen unscharfen Schatten mit einem Radius von 5 Pixeln.
  • Hinweis: Wenn dieser Wert weggelassen wird, wird der Schatten scharfkantig dargestellt.

Farbe (color) (optional):

  • Legt die Farbe des Schattens fest. Kann in verschiedenen Formaten angegeben werden, wie Hex-Werte, RGB(a)-Werte, HSL(a)-Werte oder Farbnamen.
  • Beispiel: rgba(0, 0, 0, 0.3) erzeugt einen halbtransparenten schwarzen Schatten.

Beispiel

CSS
.text-shadow {
    text-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);
}
  • 2px horizontaler Versatz (nach rechts)
  • 4px vertikaler Versatz (nach unten)
  • 5px Unschärferadius
  • rgba(0, 0, 0, 0.3) Schattenfarbe (schwarz mit 30% Transparenz)

Mehrere Schatten

Du kannst auch mehrere Schatten gleichzeitig anwenden, indem du sie durch Kommata trennst:

CSS
.text-shadow {
    text-shadow: 2px 2px 4px #000, -2px -2px 4px rgba(255, 0, 0, 0.5);
}

Dieses Beispiel fügt zwei Schatten hinzu: einen schwarzen Schatten nach unten rechts und einen roten halbtransparenten Schatten nach oben links.