Mit diesem CSS-Textschatten-Generator gestalten und exportieren Sie Textschatten direkt im Browser, ohne selbst Code zu schreiben.
Schatten visuell aufbauen. Optimieren Sie jeden Parameter in Echtzeit und sehen Sie sich die Vorschau-Aktualisierung sofort an.
Was Sie tun können:
- Fügen Sie mehrere Schattenebenen hinzu und stapeln Sie sie, um komplexe, mehrdimensionale Effekte zu erzeugen
- Horizontaler und vertikaler Versatz, Unschärfe, Streuung, Deckkraft und Farbe pro Ebene steuern
- Ziehen Sie Ebenen und ordnen Sie sie neu an, um deren Stapelung zu ändern
- Wählen Sie aus 8 eingebauten Presets einschließlich Neon Glow, Fire, Emboss, Retro Hard und mehr
- Testen Sie Ihr Design gegen eine beliebige Hintergrundfarbe oder ein Schachbrett (für Transparenztests)
- Schriftfamilie, Schriftgröße, Schriftstärke, Buchstabenabstand, Zeilenhöhe und Textfarbe anpassen
- Kopieren Sie das Ergebnis als vollständige CSS-Regel, einen bloßen
text-shadow-Wert oder eine Tailwind-Klasse
Der Spread-Schieberegler simuliert einen CSS-Spread-Effekt mithilfe von Ebenen-Schattenoffsets, da text-shadow keine native Spread-Unterstützung bietet.
Keine Abhängigkeiten. Keine Installationen. Fügen Sie die Ausgabe direkt in Ihr Stylesheet ein.
Was ist ein CSS-Textschatten-Generator?
Ein CSS-Textschattengenerator ist ein browserbasiertes Werkzeug, das einen Textschattenwert durch Schieberegler, Farbwähler und eine Live-Vorschau erstellt, anstatt von Hand eingegebene Syntax.
Es befindet sich in der größeren Welt der css (EN)-Tools, neben Generatoren für Verläufe, Grenzen und Animationen.
Geben Sie einen horizontalen Versatz, einen vertikalen Versatz, einen Weichzeichnungsradius und eine Farbe ein, und das Werkzeug rendert den Effekt in Echtzeit auf Beispieltext.
Zwei Dinge unterscheiden einen Generator von einer einfachen Referenzseite:
- Ein Live-Vorschaufenster, das sich aktualisiert, wenn sich Werte ändern
- Ein CSS-Code-Snippet zum Kopieren, bereits formatiert und syntaktisch korrekt
Niemand merkt sich die genaue Reihenfolge von Offset-x, Offset-y, Unschärferadius und Farbe auf den ersten Versuch. Das ist wirklich der ganze Grund, warum diese Werkzeuge existieren.
Wie funktioniert die CSS Text-Shadow-Eigenschaft?
Die text-shadow-Eigenschaft in css3 nimmt einen durch Kommas getrennten Wert an, der aus vier Teilen besteht: offset-x, offset-y, blur-radius und color.
Offset-x verschiebt den Schatten nach links oder rechts. Offset-y verschiebt es nach oben oder unten.
Ein negativer Wert auf einer der Achsen ändert die Richtung. Ein positiver Offset-x drückt den Schatten nach rechts, ein negativer nach links.
Weichzeichnungsradius steuert, wie weich die Schattenkante aussieht.
Setzen Sie den Wert auf Null, um ein scharfes, scharfkantiges Duplikat des Textes zu erhalten. Wenn Sie ihn höher schieben, breitet sich der Rand aus und verblasst, wodurch im Grunde ein Leuchteffekt entsteht.
Die vier Teile, in der erforderlichen Reihenfolge:
- Offset-x (erforderlich)
- Offset-y (erforderlich)
- blur-radius (optional, Standardwert 0)
- Farbe (optional, Standard ist currentColor)
Ein einzelner Schatten sieht in einem Stylesheet so aus:
h1 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}MDN Web Docs (EN) listet diese gleiche vierteilige Reihenfolge in ihrer offiziellen Referenz auf. Die Spezifikation dahinter, die von der CSS-Arbeitsgruppe gepflegt wird, ist das CSS Text Decoration Module Level 3 (EN).
Das Anwesen hat eine seltsame Geschichte. Es erschien zuerst in CSS2, wurde aus CSS2.1 komplett entfernt und kam dann in CSS3 unter demselben Textdekorationsmodul wieder.
Wie überlagern Sie mehrere Textschatten für Tiefe und Glanz?
Mehrere Textschattenwerte werden in einer einzelnen, durch Kommas getrennten Liste gestapelt, und jeder wird als eigene Ebene hinter dem Text gerendert.
Der erste Schatten in der Liste befindet sich am nächsten zum Text. Jeder Schatten, der danach geschrieben wird, wird weiter zurück gerendert, in der Reihenfolge, in der er erscheint.
Tiefenschichtung
Tiefeneffekte verwenden mehrere Schatten mit zunehmendem Versatz und einer festen dunklen Farbe, sodass jede Ebene etwas weiter entfernt liegt als die letzte.
text-shadow:
0.1em 0.1em 0 #ccc,
0.2em 0.2em 0 #999,
0.3em 0.3em 0 #666;Jede Schicht sitzt einen Schritt weiter heraus, was den abgestuften, extrudierten Look erzeugt.
Glow Layer
Glow-Effekte überspringen den Offset vollständig und stapeln stattdessen Unschärfe.
Ein typisches Neonlicht verwendet drei oder vier Schatten, alle bei 0 0, wobei der Unschärferadius auf jedem Schatten steigt und eine gesättigte Farbe wie Cyan oder Magenta verwendet wird.
Einige Effekte treiben dies noch weiter voran, indem sie geschichtete Schatten in kontrastierenden Farben verwenden, die leicht voneinander entfernt sind. Dies ist die grundlegende Mechanik hinter dem Glitch-Text-Look.
Das Stapeln zu vieler Ebenen verlangsamt die Neuzeichnung auf Geräten mit geringerer Leistung. Bei den meisten Generatoren endet die Zählung bei etwa fünf bis acht Schatten, bevor der Effekt die Kosten nicht mehr wert ist.
Welche Farbformate funktionieren am besten in einem Text-Shadow-Wert?
Text-shadow akzeptiert die gleichen Farbformate wie der Rest von css: hex, rgba und hsla.
| Format | Beispiel | Am besten für |
|---|---|---|
| Hex | #1a1a1a | Flache, undurchsichtige Schatten |
| Rgba | rgba(0,0,0,0.6) | Halbtransparent, weiche Kanten |
| Hsla | hsla(200,80%,50%,0.5) | Farbtonbasierte Glüheffekte |
Hex funktioniert gut, wenn ein Schatten vollständig deckend bleiben muss, wie z. B. ein harter Schlagschatten hinter einer Überschrift.
Rgba fügt einen Alphakanal hinzu, und das ist es, was einen Schatten in den Hintergrund übergehen lässt, anstatt dort als flacher Farbblock zu sitzen.
Der Wechsel zwischen den beiden erfolgt in einem Schritt mit einem RGB-zu-HEX-Konverter, wenn ein Designsystem Ihnen ein Hex-Farbmuster übergibt und der Generator rgba benötigt.
Hsla verhält sich wie rgba, aber zeigt Farbton und Sättigung direkt an, was die Neon- oder Glüharbeiten beschleunigt, da Sie über ein Farbrad gleiten, anstatt nach festen Farbfeldern zu suchen.
Um einen Wert aus einer hsl-basierten Palette zu ziehen, muss man ihn manchmal zuerst durch einen HSL-zu-RGB-Konverter laufen lassen.
Der Alpha-Kanal erledigt hier die eigentliche Arbeit. Ein Schatten mit voller Deckkraft liest sich flach und ein wenig künstlich neben demselben Schatten, der auf 10 oder 20% Transparenz reduziert wurde.
CSS Text-Shadow vs Box-Shadow vs der Drop-Shadow Filter: Was ist der Unterschied?
Textschatten schattiert die Glyphenkonturen des Textes selbst. Box-Shadow schattiert den Kasten des Elements, das Rechteck um ihn herum.
Die Schlagschatten-Filter (EN)-Funktion, definiert im CSS-Filtereffekte-Modul (EN), folgt der tatsächlichen Alpha-Form dessen, worauf sie angewendet wird, einschließlich Text.
| Eigentum | Gilt für | Layering | Kosten |
|---|---|---|---|
| Textschatten | Glyphenkonturen | Durch Kommas getrennt, nativ | Low |
| Schatten | Elementbox | Durch Kommas getrennt, nativ | Niedrig bis moderat |
| drop-shadow() | Alphaform (Bild, SVG, Text) | Ein Schatten pro Filteraufruf | Höher, GPU-abhängig |
Box-Shadow ignoriert den Text vollständig und schattiert das umgebende Feld. Daher ist es das falsche Werkzeug, wenn das Ziel darin besteht, einzelne Buchstabenformen zu schattieren. Dieser Job gehört stattdessen zu einem dedizierten Box-Shadow-Generator.
Drop-Shadow kann mehrere Elemente oder ein ganzes Bild umhüllen und dennoch die tatsächliche Form darin nachzeichnen, was weder Text-Shadow noch Box-Shadow kann.
Der Kompromiss sind die Renderingkosten. Drop-Shadow läuft tendenziell schwerer als Text-Shadow, da der Browser die tatsächliche Form und nicht nur die Box oder die Zeichenumrisse berechnen muss.
Welche Browser unterstützen Text-Shadow und wo liegen die Kompatibilitätsgrenzen?
Die Unterstützung von Textschatten in modernen Browsern ist zu diesem Zeitpunkt praktisch universell.
Kennzahlen, pro Kann ich verwenden (EN):
- Vollständige Unterstützung für Chrome, Firefox, Edge und Safari in allen aktuellen Versionen
- Internet Explorer-Unterstützung beschränkt auf Versionen 10 und 11, ohne Unterstützung in IE 5.5 bis 9
- Opera Mini ignoriert den Blur-Radius-Wert vollständig, sodass Schatten ohne Unschärfe dargestellt werden
Die verbleibenden Lücken liegen fast ausschließlich in der Altsoftware. Jeder, der gegen eine aktuelle Browserliste entwickelt, wird wahrscheinlich nicht auf Darstellungsprobleme stoßen.
Die Überprüfung des tatsächlichen Datenverkehrs eines Projekts gegen cross-browser compatibility (EN)-Daten ist immer noch fünf Minuten wert, bevor schwere Schattenschichten gesendet werden. Das gilt doppelt für eine öffentliche Marketing-Seite und nicht für ein internes Tool.
Chrome DevTools macht es einfach, dies im Voraus zu überprüfen. Öffnen Sie den Stilinspektor und passen Sie die Schattenwerte live gegen die tatsächlich gerenderte Seite an.
Was sind die Vor- und Nachteile der Verwendung eines Text-Shadow-Generators anstelle des manuellen Schreibens von CSS?
Ein Generator gewinnt an Geschwindigkeit. Die gleiche vierteilige Syntax aus dem Speicher einzugeben und dann die Unschärfe und den Offset zu überprüfen, bis sie richtig aussieht, dauert länger als das Ziehen von drei Schiebereglern.
Vorteile des Generators:
- Sofortiges visuelles Feedback anstelle einer Speichern-Aktualisieren-Überprüfen-Schleife
- Keine Notwendigkeit, sich die Reihenfolge von Offset-x, Offset-y, Blur-Radius zu merken
- Mehrschichtige Effekte wie Glühen, Neon oder 3D kommen ohne Versuch und Irrtum zusammen
Generator Nachteile:
- Kopierte und eingefügte Werte ohne wirkliches Verständnis, was jede Zahl tut
- Generierter Code kann zusätzliche Schichten enthalten, die ein handgeschriebener Wert nicht benötigen würde
- Lehrt Sie nicht, wenn text-shadow tatsächlich die falsche Eigenschaft ist, nach der zu greifen
Die manuelle Codierung gewinnt in einem konkreten Fall: einem einzelnen, einfachen Schatten auf einer Überschrift. Die Eingabe von text-shadow: 1px 1px 2px #000; dauert weniger Zeit als das Öffnen eines Browser-Tabs.
Die wahre Auszahlung eines Generators zeigt sich, wenn ein Design drei oder vier gestapelte Schatten erfordert, wobei das manuelle Abstimmen jedes Offsets durch Versuch und Irrtum schnell mühsam wird.
Dieser Geschwindigkeitsvorteil ist wirklich ein Usability (EN) Gewinn, mehr als ein Programmiergewinn. Das Werkzeug entfernt Reibung aus einer Aufgabe, die technisch nie schwierig war, nur mühsam.
Wie benutzt man einen CSS-Textschatten-Generator, Schritt für Schritt?
Jeder Generator folgt in etwa dem gleichen Workflow, unabhängig davon, welchen Sie öffnen.
- Geben Sie den Beispieltext ein oder fügen Sie ihn in das Vorschaufeld ein
- Stellen Sie mit den Schiebereglern den horizontalen und vertikalen Versatz ein
- Passen Sie den Unschärferadius an, bis die Kantenweichheit richtig aussieht
- Wählen Sie eine Schattenfarbe aus und vergleichen Sie sie mit dem tatsächlichen Seitenhintergrund
- Fügen Sie eine zweite oder dritte Schattenebene hinzu, wenn der Effekt Tiefe oder Glanz benötigt
- Kopieren Sie das generierte CSS-Code-Snippet und fügen Sie es in Ihr Stylesheet ein
Ein Schritt wird mehr als jeder andere übersprungen: Überprüfen der Vorschau anhand Ihrer tatsächlichen Hintergrundfarbe, nicht der standardmäßigen weißen Leinwand des Generators.
Ein Schatten, der auf Weiß scharf aussieht, kann auf einem dunklen Heldenbild oder einem farbigen Ausschnitthintergrund vollständig verschwinden.
Fügen Sie die Ausgabe in ein externes Stylesheet oder einen Sass-Partialstil ein, wenn Ihr Projekt bereits eines verwendet, und nicht in einen Inline-Stil, wenn sich derselbe Effekt auf einer Seite wiederholt.
Es ist einfacher, eine Regel später anzupassen, als fünf Inline-Kopien zu finden, die über eine Vorlage verteilt sind.
Wie erstellt man spezifische Text-Schatten-Effekte (Glühen, Neon, 3D, Prägung)?
Dieselbe vierteilige Syntax ergibt sehr unterschiedliche Ergebnisse, je nachdem, wie Offset, Weichzeichnung und Farbe kombiniert werden.
Neoneffekt
Neontext überlagert drei oder vier Schatten mit Null-Offset, wobei der Unschärferadius jedes Mal ansteigt.
color: #fff;
text-shadow:
0 0 5px #0ff,
0 0 15px #0ff,
0 0 30px #0ff;Die Textfarbe wird hier normalerweise nahe an Weiß gesetzt, so dass das Leuchten als nach außen fließendes Licht gelesen wird und nicht als farbiger Umriss.
3D Effekt
Layered Offset erzeugt einen 3D-Look: Ein Schatten wird mehrmals wiederholt, mit jeder Wiederholung um ein Pixel vergrößert, Farbe bleibt flach.
text-shadow:
1px 1px 0 #ccc,
2px 2px 0 #bbb,
3px 3px 0 #aaa;Schriftstärke spielt hier eine Rolle.
Eine dünne Schrift bricht unter diesen vielen gestapelten Schichten auseinander. Ein fett oder schwarzes Gewicht hält die Form.
Prägeeffekt
Emboss verwendet genau zwei Schatten anstelle eines Stapels: einen hellen Schatten, der links oben versetzt ist, und einen dunklen Schatten, der rechts unten versetzt ist.
| Layer | Offset | Farbe |
|---|---|---|
| Highlight | -1px -1px 0 | Hellgrau oder weiß |
| Shadow | 1px 1px 0 | Dunkelgrau oder schwarz |
color: #888;
text-shadow:
-1px -1px 0 #fff,
1px 1px 0 #333;Dieses Paar ist die gleiche Hell-Dunkel-Logik hinter Neumorphismus (EN) Design, nur auf Text angewendet anstelle eines UI-Panels.
Es liest sich nur vor einem Mitteltonhintergrund richtig. Auf reinem Weiß oder reinem Schwarz verschwindet eine der beiden Schichten vollständig.
Kann der Text-Schatten beim Hover oder Übergang animiert werden?
Der Textschatten kann beim Bewegen mit der Maus überschrieben werden, und Browser animieren die Farbe und den Unschärferadius reibungslos zwischen zwei Zuständen.
Der Haken ist die Leistung. Text-Shadow löst bei jedem Frame, den es ändert, ein Repaint aus, da der Browser unscharfe Pixel neu berechnen muss, anstatt nur eine Ebene neu zu positionieren.
Tobias Ahlins weithin zitierte Aufschlüsselung (EN) über das Animieren von Schatten fand heraus, dass die gleichen Neuzeichnungskosten für Box-Shadow gelten und Text-Shadow den gleichen Renderpfad teilt.
Eigenschaften, die diese Kosten vermeiden:
- Deckkraft
- Transformieren
Beide sind hardwarebeschleunigt und lösen nur Compositing aus, keine vollständige Neuzeichnung.
Eine häufige Umgehung besteht darin, den Schatten festzuhalten und stattdessen die Deckkraft des Elements, das ihn trägt, zu verändern, sodass er einblendet, ohne in jedem Frame neu gemalt zu werden.
Bei einer einzelnen Überschrift oder Schaltfläche sind diese Kosten nicht sichtbar. Auf einer Seite, die Schatten über eine lange Liste oder ein Kartenraster animiert, ist es der Unterschied zwischen einer reibungslosen Interaktion und sichtbarem Jamming auf Geräten mit geringerer Leistung.
Breitere Bewegung auf Buchstabenebene, die Art, die über einen einfachen Hover-Zustand hinausgeht, ist wirklich eine eigene Kategorie. Es sitzt näher an css Textanimationen (EN) als an einem statischen Schatteneffekt.
Wann funktioniert Text-Shadow nicht oder schlägt fehl?
Text-shadow funktioniert in einigen klar dokumentierten Situationen nicht, ohne eine Fehlermeldung auszugeben.
Erzwungener Farbmodus: Windows High Contrast und ähnliche systemweite Einstellungen erzwingen, dass der Textschatten komplett fehlt. Die forced-colors media query (EN), die dies erkennt, ist laut MDN seit September 2022 neu verfügbar und seit März 2025 weit verbreitet verfügbar.
Die vom Benutzer gewählte Palette überschreibt sie, und diese Überschreibung mit mehr CSS zu bekämpfen, macht den Sinn der Barrierefreiheitseinstellung überhaupt zunichte.
Print Stylesheets: Die meisten Produktionsdruckstile, einschließlich des Musters, das durch HTML5 Boilerplate (EN) populär gemacht wurde, entfernen Text-Schatten und Box-Schatten mit einer allgemeinen Überschreibungsregel, bevor die Seite jemals auf Papier kommt.
Tinte lässt keine Unschärfe wie ein Bildschirm, so dass der Schatten nur als Fleck hinter den Buchstaben gedruckt wird.
Niedrige Kontrastlesbarkeit: Eine Schattenfarbe, die zu nah am Hintergrund liegt, verschlingt den Effekt und manchmal auch den Text.
Die WebAIM Million (EN) fand 83,9% der Homepages, die im Jahr 2026 für kontrastarmen Text gekennzeichnet wurden, gegenüber 79,1% im Jahr 2025. Eine schlecht gewählte Schattenfarbe ist eine weitere Möglichkeit, dass die Zahl ansteigt anstatt zu fallen.
WCAG 2.1 (EN) legt ein Mindestverhältnis von 4,5:1 für Farbkontrast (EN) für normalen Text fest. Ein Schatten, der den effektiven Kontrast beeinträchtigt, kann ansonsten kompatiblen Text unter diese Zeile drücken.
Nichts davon bedeutet, Textschatten zu vermeiden. Es bedeutet, sie als Dekoration zu behandeln, die über lesbaren Text gelegt wird, in Übereinstimmung mit der grundlegenden Web-Zugänglichkeit (EN)-Praxis, nicht als Ersatz dafür.
Welche häufigen Fehler brechen die erzeugte Text-Shadow-Ausgabe?
Die meisten Ausgaben eines Textschattengenerators scheitern aus einem von drei vorhersehbaren Gründen, nicht aus irgendetwas Exotischem.
| Mistake | Was passiert dann? | Fix |
|---|---|---|
| Unschärfenradius zu hoch | Buchstabenformen lösen sich in einem Nebel auf | Unschärfe auf 20-30% der Schriftgröße reduzieren |
| Fehlende Offset-Werte | Schatten sitzt unsichtbar hinter dem Text | Fügen Sie mindestens 1px auf jeder Achse hinzu |
| Teilweise Kopie eines überlagerten Wertes | Es wird nur eine Schattenebene gerendert | Kopieren Sie die gesamte durch Kommas getrennte Zeichenfolge |
Eine zu hohe Unschärfeeinstellung ist die häufigste Ursache. Ein Radius, der größer als etwa ein Drittel der Schriftgröße ist, wird nicht mehr als Schatten gelesen, sondern als Nebel hinter den Buchstaben.
Wenn du die Schriftgröße auf 20 bis 30 % der Schriftgröße reduzierst, wird die Form normalerweise wiederhergestellt, ohne dass die Weichheit verloren geht.
Offset-x und Offset-y bei Null, ohne Unschärfe, erzeugen einen Schatten, der direkt hinter dem Text sitzt, wo die Buchstaben ihn vollständig verbergen.
Es sieht so aus, als ob die Unterkunft nichts getan hat. In Wirklichkeit wurde der Schatten genau so dargestellt, wie er geschrieben wurde, nur dort gestapelt, wo nichts zu sehen ist.
Der dritte Fehler passiert in der Zwischenablage, nicht im Code. Mehrschichtwerte sind lange, durch Kommas getrennte Zeichenfolgen, und das Kopieren nur eines Teils einer Ebene löscht jede Ebene nach dem Ausschneiden.
Fügen Sie den vollständigen String vor dem Senden wieder in die Vorschau des Generators ein. Das ist am wichtigsten, wenn der Wert über eine Chatnachricht oder ein Design-Handoff-Dokument ankommt und nicht über eine direkte Kopie aus dem Tool.
Häufige Fragen: CSS-text-shadow-Generator
Was ist die maximale Anzahl von Schattenebenen, die ein Browser rendern kann?
Browser setzen keine Großbuchstaben auf die Anzahl der durch Kommas getrennten Schatten in einem Text-Shadow-Wert.
Die tatsächliche Obergrenze ist praktisch: Die Farbkosten steigen mit jeder Schicht, und die meisten Generatoren begrenzen sie auf acht bis zehn.
Unterstützt Text-Shadow Alpha-Transparenz in jedem Browser?
- Ja. - Ja. Jeder Browser, der text-shadow unterstützt, unterstützt auch die Werte rgba und hsla darin, da Alpha-Transparenz Teil derselben Farbsyntax ist.
Die einzige Ausnahme ist Internet Explorer 9 und früher, der die Eigenschaft nie unterstützt hat.
Kann der Textschatten auf Hintergrundbilder oder nur auf Text angewendet werden?
Text-Shadow schattiert nur die Glyphen der eigentlichen Textknoten.
Es hat keine Auswirkungen auf Hintergrundbilder, SVG-Formen oder die Box eines Elements.
Das Schattieren eines Hintergrundbilds erfordert stattdessen den Schattenfilter, der der echten Alphaform des Bildes und nicht einem Begrenzungsrahmen folgt.
Beeinflusst Text-Shadow die Seitenleistung oder SEO?
Ein statischer Text-Schatten kostet fast nichts zu rendern und hat keine direkten SEO-Auswirkungen, da Suchmaschinen dekoratives CSS nicht als Inhalt analysieren.
Lesbarkeit ist wichtiger. Ein Schatten, der den Kontrast verringert, kann das Engagement beeinträchtigen. Dabei handelt es sich um ein Problem der Benutzerfreundlichkeit und nicht um einen Ranking-Faktor.
Können generierte Werte als Sass Mixin oder als Tailwind oder Bootstrap Utility Class wiederverwendet werden?
Ja. Ein generierter Textschattenwert wird als Variable in ein Sass-Mixin oder eine benutzerdefinierte Tailwind (EN)-Dienstprogrammklasse in der Konfigurationsdatei eingefügt.
Bootstrap (EN) wird ohne Text-Shadow-Dienstprogramm ausgeliefert, daher benötigen Projekte darauf eine kleine benutzerdefinierte Klasse.
Was sollten Sie vor der Veröffentlichung eines CSS-Textschatteneffekts prüfen?
Ein CSS-Textschattengenerator-Effekt kann ausgeliefert werden, sobald das Render-, Kontrast- und Bewegungsverhalten gegen den tatsächlichen Hintergrund der Seite überprüft wurden.
Drei Prüfungen entscheiden über die Bereitschaft, in der Reihenfolge:
- Kontrast gegen den realen Hintergrund
- Zwangsfarben und Druckfallback
- Rendering über die Browser hinweg, die Ihr Traffic verwendet
Das Überspringen der Reihenfolge ist weniger wichtig als das Überspringen eines Schritts, da ein Schatten, der den Kontrast nicht erfüllt, normalerweise auch die anderen beiden Prüfungen nicht erfüllt.
Eine Bedingung ändert diesen Ratschlag: Ein animiertes Leuchten oder Impuls, der auf dem Schattenwert aufbaut, ignoriert ein echtes Barrierefreiheitssignal ohne Bewegungsfallback.
prefers-reduced-motion (EN) wird seit Januar 2020 in allen gängigen Browsern unterstützt und laut MDN seit Juli 2022 weit verbreitet. Wenn Sie einen Textschatten animieren, ohne ihn zu überprüfen, tauschen Sie eine auffällige Demo gegen ein gebrochenes Erlebnis für einen Teil der Besucher ein.
Text, der über einem transparenten Panel sitzt, benötigt die gleiche Kontrastdisziplin, die der Ausgangspunkt für einen CSS-Glassmorphism-Generator ist.