CSS-Box-Shadow-Generator mit Karten-Vorschau | We.Inc
Erstelle mehrschichtige CSS-Box-Schatten und teste sie auf Service- und Preiskarten mit hellem und dunklem Hintergrund sowie sichtbarem Fokusstatus. Kopiere das CSS und eine fertige Kartenkomponente.
Schatten lassen sich auf einem grauen Quadrat nur schwer beurteilen. Hier passt du einen mehrschichtigen box-shadow an und siehst ihn auf einer Servicekarte und einer Preiskarte, auf einer hellen oder dunklen Seite und mit einem Tastatur-Fokusring, den du mit Tab testen kannst. Kopiere das CSS oder die gesamte Kartenkomponente, wenn das Ergebnis passt. Alles läuft in deinem Browser. Nichts, was du eingibst, wird an We.Inc oder andere gesendet; wenn du den Tab schließt, ist es weg.
Beginne mit einer Voreinstellung oder passe die erste Ebene an: horizontaler und vertikaler Versatz, Weichzeichnung, Ausbreitung, Farbe, Deckkraft und inset.
Füge bis zu fünf Ebenen hinzu. Mehrschichtige Schatten (ein enger und ein breiter, weicher Schatten) wirken natürlicher als ein einzelner großer Schatten.
Wechsle in der Vorschau zwischen einer hellen und einer dunklen Seite. Drücke Tab, um die Schaltflächen der Karte anzusteuern und zu prüfen, ob der Fokusring sichtbar bleibt.
Die Prüfungen warnen, wenn der Schatten auf dem gewählten Hintergrund zu blass ist oder der Text auf der Karte den WCAG-AA-Kontrast unterschreitet.
Kopiere die box-shadow-Deklaration oder die vollständige Kartenkomponente mit HTML und CSS.
Auf dunklen Hintergründen sind Schatten kaum zu erkennen. Verwende stattdessen eine etwas hellere Kartenfarbe oder einen dünnen Rahmen, um die Karte abzuheben.
Für einen weicheren Look sollte die Schattenfarbe an den Hintergrund angelehnt sein und nicht reines Schwarz sein.
Verlasse dich nie allein auf einen Schatten, um den Fokus zu zeigen. Verwende zusätzlich eine klare Kontur.
Große Weichzeichnungswerte sind aufwendiger zu zeichnen. Vermeide es, sie in langen Listen zu animieren.
Verwende auf der gesamten Website ein oder zwei Schattenstufen, damit Tiefe eine Bedeutung hat.
Häufige Fragen
Wie funktioniert die CSS-Eigenschaft box-shadow?
box-shadow verwendet einen horizontalen und einen vertikalen Versatz, optional einen Weichzeichnungsradius, eine Ausbreitung und eine Farbe sowie das Schlüsselwort inset für innere Schatten. Du kannst mehrere Schatten durch Kommas getrennt auflisten; der erste wird oben gezeichnet.
Warum sehen mehrschichtige Schatten besser aus?
Echte Objekte werfen einen scharfen Schatten in ihrer Nähe und einen weichen, breiten Schatten weiter entfernt. Zwei oder drei Ebenen mit zunehmender Weichzeichnung und abnehmender Deckkraft ahmen das nach.
Warum ist mein Schatten auf dunklem Hintergrund unsichtbar?
Ein dunkler Schatten auf einer dunklen Seite hat kaum Kontrast. Das Tool warnt dich davor. Hebe die Karte stattdessen mit einer helleren Oberfläche oder einem dezenten Rahmen hervor.
Beeinflusst box-shadow die Barrierefreiheit?
Schatten sind dekorativ und müssen daher selbst keine Kontrastregeln erfüllen. Wichtig ist, dass Text auf der Karte lesbar bleibt und der Fokus durch eine sichtbare Kontur angezeigt wird, nicht nur durch eine Schattenänderung.
Ist der CSS-Schatten-Generator kostenlos?
Ja, ohne Anmeldung. Kopiere den Code in ein beliebiges Projekt.
Teste Schatten auf den Komponenten, die du veröffentlichst
Ein Schatten, der auf einem einzelnen Quadrat gut aussieht, kann auf einer Reihe von Preiskarten schwer wirken oder unter einem Foto verschwinden. Wenn du ihn auf den Karten testest, die eine kleine Unternehmenswebsite wirklich verwendet – einer Servicekarte mit Symbol und einem hervorgehobenen Tarif –, siehst du das spätere Ergebnis.
Der Komponentencode enthält eine focus-visible-Kontur. So bleibt die Karte unabhängig vom gewählten Schatten mit der Tastatur bedienbar.