Kategorie: Entwicklung
CSS-Text-Shadow-Generator
Mehrere text-shadow-Ebenen schichten und das CSS kopieren
Stellen Sie Versatz, Weichzeichnung, Farbe und Deckkraft ein und erhalten Sie eine mehrschichtige text-shadow-Deklaration, die aus dieser einen Basis aufgebaut ist, mit Live-Vorschau und einer Schaltfläche zum Kopieren des fertigen CSS.
Schattenvorschau
text-shadow: 1px 1px 2px rgba(23, 33, 28, 0.5), 1px 1px 4px rgba(23, 33, 28, 0.39), 2px 2px 6px rgba(23, 33, 28, 0.28);
Alles auf dieser Seite wird in Ihrem Browser verarbeitet. Nichts wird hochgeladen.
Wozu dieses Werkzeug dient
Ein einzelner text-shadow wirkt als flache, hartkantige Umrandung, während ein weiches Leuchten oder ein gestapelter Schlagschatten-Effekt mehrere Ebenen braucht, die in Versatz und Weichzeichnung schrumpfen, während die Deckkraft abnimmt. Dieses Werkzeug leitet diesen ganzen Stapel aus dem eingestellten Basis-Versatz, der Weichzeichnung, Farbe und Deckkraft ab – dieselbe Schichtungstechnik, die der Box-Shadow-Ebenen-Generator verwendet –, sodass Sie nur über einen einzigen Schatten nachdenken müssen, statt mehrere, durch Kommas getrennte von Hand zu schreiben.
So funktioniert es
- Legen Sie fest, wie viele Ebenen erzeugt werden, sowie Basis-Versatz und Weichzeichnung.
- Wählen Sie eine Farbe und Deckkraft.
- Prüfen Sie die Live-Vorschau und kopieren Sie dann die text-shadow-Deklaration.
Datenschutz
Dieses Werkzeug läuft vollständig in Ihrem Browser. Ihre Eingabe wird nie hochgeladen, gespeichert oder weitergegeben – beim Schließen des Tabs ist sie weg.
Häufig gestellte Fragen
- Warum wird der Schatten durch zusätzliche Ebenen weicher?
- Jede zusätzliche Ebene verkleinert sich Richtung Text, während die Deckkraft abnimmt, sodass die Ebenen zusammen als weicher Verlauf des Schattens wirken statt als eine hartkantige Kopie.
- Wird etwas an einen Server gesendet?
- Nein. Die Deklaration wird auf der Seite aus den eingestellten Werten berechnet, weshalb sich die Vorschau sofort aktualisiert.
- Kann ich das für einen Neon- oder Leuchteffekt verwenden?
- Ja. Eine helle Farbe mit starker Weichzeichnung und mehreren Ebenen wirkt als Leuchten; eine dunkle Farbe mit kleinem Versatz und geringer Weichzeichnung wirkt stattdessen als dezenter Tiefenschatten.