🔤 Ein Toolkit,
jede Designaufgabe

Textschatten-Generator

Gestalte mehrschichtige Textschatten mit Echtzeit-Vorschau. Passe Versatz, Unschärfe, Farbe und Deckkraft an — kopiere das CSS sofort.

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

🔤 Textschatten-Generator

Text-Schatten-Leitfaden

Textschatten verleihen Überschriften und Hero-Text Tiefe und Nachdruck. Indem du eine unscharfe Kopie des Textes hinter das Original verschiebst, entsteht ein erhabener, schwebender Effekt, der die Lesbarkeit auf unruhigen Hintergründen verbessert.

Passe horizontalen und vertikalen Versatz, Unschärferadius, Schattenfarbe, Deckkraft, Textfarbe und Schriftgröße an. Die Canvas-Vorschau rendert exakt, was der Browser anzeigen wird, und der CSS-Output ist bereit zum Einfügen in dein Stylesheet.

Pro Tips

Frequently Asked Questions

Q: Was ist der Unterschied zwischen text-shadow und box-shadow?
Was ist der Unterschied zwischen text-shadow und box-shadow? text-shadow wirkt auf die Glyphen des Textes, box-shadow auf die rechteckige Box des Elements. text-shadow unterstützt keinen Spread-Parameter.
Q: Kann ich mehrere Textschatten hinzufügen?
Kann ich mehrere Textschatten hinzufügen? Ja. Trenne jeden Schatten in derselben Deklaration mit einem Komma, z. B. text-shadow: 2px 2px 4px rgba(0,0,0,.5), 6px 6px 12px rgba(0,0,0,.25);
Q: Warum sieht mein Textschatten verschwommen aus?
Warum sieht mein Textschatten verschwommen aus? Prüfe den Unschärfewert — über 20px wird er sehr diffus. Stelle außerdem sicher, dass die Schattenfarbe genug Kontrast zum Hintergrund hat.
Q: Beeinträchtigt text-shadow die Leistung?
Beeinträchtigt text-shadow die Leistung? Minimal. Eine Handvoll text-shadows hat vernachlässigbare Auswirkungen, selbst auf Mobilgeräten.
Q: Kann ich text-shadow für einen Neon-Glow nutzen?
Kann ich text-shadow für einen Neon-Glow nutzen? Ja. Setze den Versatz auf 0 0, nutze eine leuchtende Farbe mit voller Deckkraft und erhöhe die Unschärfe auf 15-30px. Staple mehrere Farben für ein intensiveres Leuchten.

Bauhaus-Farben

Die Bauhaus-Schule definierte die moderne Farbtheorie: Primärfarben als Werkzeuge, klare Kontraste statt Ornamente. Diese Palette zitiert die ikonischen Farben von Weimar, Dessau und der deutschen Designgeschichte.

Bauhaus Rot #BE1E2D

Das ikonische Rot der Bauhaus-Plakate und Drucksachen

Bauhaus Gelb #FFDE17

Das leuchtende Gelb der Bauhaus-Ästhetik

Bauhaus Blau #00509E

Das tiefe Blau des Bauhaus-Farbkreises

Ultramarin #120A8F

Historisches Pigment aus Lapislazuli, von Goethe beschrieben

Ocker #C78B2C

Erdpigment der deutschen Renaissance-Malerei

Petrol #006D7C

Das Blaugrün der Nachkriegszeit und des Mid-Century-Designs

Lindgrün #7CBA3D

Das frische Grün der Frühlingslinden

Ziegelrot #B22222

Die roten Ziegeldächer der Altstädte

Graphit #38383A

Der dunkle Grauton der Zeichenkunst und des Industriedesigns

Weiß #F4F4F4

Das Weiß der Bauhaus-Wände — Raum und Licht

Q: Was sind Bauhaus-Farben?
Was sind Bauhaus-Farben? Die Bauhaus-Farben sind die Primärfarben Rot (#BE1E2D), Gelb (#FFDE17) und Blau (#00509E) sowie Schwarz und Weiß. Die Schule (1919-1933) nutzte sie als systematische Farbenlehre statt dekorativer Ornamente.
Q: Was ist Ultramarin?
Was ist Ultramarin? Ultramarin (#120A8F) ist ein historisches blaues Pigment, ursprünglich aus dem Halbedelstein Lapislazuli gewonnen. Es war teurer als Gold und wurde für Madonnen-Mäntel in der Renaissance reserviert.