CSS Box-Shadow-Generator

Passen Sie Versatz, Unschärfe, Ausbreitung, Farbe und Deckkraft per Schieberegler an und erzeugen Sie einen CSS box-shadow mit Live-Vorschau. Kopieren Sie den generierten Code mit einem Klick.

Tipps zur Nutzung

  • Statt die Schieberegler zu ziehen, können Sie auch exakte Zahlenwerte direkt in die Felder eingeben, wenn Sie präzise Werte benötigen.
  • Aktivieren Sie "inset", um den Schatten innerhalb des Elements zu zeichnen – das ergibt einen eingedrückten statt eines erhabenen Effekts.
  • Ein größerer Spread-Wert vergrößert den gesamten Schattenumriss, während ein größerer Blur-Wert die Kanten weicher und diffuser macht – kombinieren Sie beide für unterschiedliche Texturen.
  • Eine geringere Deckkraft lässt den Schatten leichter und natürlicher wirken, was hilfreich ist, wenn sich Elemente über farbigen Hintergründen überlappen.
  • Das generierte CSS kann direkt in Ihr Stylesheet eingefügt werden – besonders wirkungsvoll in Kombination mit Hover-Effekten bei Buttons und Karten.

Häufig gestellte Fragen

Der Unschärferadius (blur) bestimmt, wie weich die Kante des Schattens wirkt – ein größerer Wert verteilt den Verlauf über eine breitere Fläche. Der Ausbreitungsradius (spread) verändert dagegen die Größe der Schattenform selbst: positive Werte vergrößern ihn gegenüber dem Element, negative Werte verkleinern ihn. Die Kombination beider erlaubt eine feine Kontrolle über die Textur des Schattens.

Das Schlüsselwort inset zeichnet den Schatten innerhalb des Elementrands statt außerhalb. Während ein normaler box-shadow ein Element über der Seite schweben lässt, lässt inset es eingedrückt oder vertieft wirken – häufig verwendet, um den Rand von Eingabefeldern zu gestalten.

Die CSS-Eigenschaft box-shadow akzeptiert eine durch Kommas getrennte Liste von Schatten, wodurch mehrere für einen dreidimensionaleren Look übereinandergelegt werden können. Dieses Tool konzentriert sich der Einfachheit halber auf die Erzeugung eines einzelnen Schattens; falls mehrere Ebenen benötigt werden, können Sie dem generierten CSS manuell durch Kommas getrennte Werte hinzufügen.

box-shadow ist eine Standard-CSS-Eigenschaft, die von allen modernen Browsern unterstützt wird, einschließlich Internet Explorer 9 und neuer. Herstellerpräfixe wie -webkit- und -moz- waren früher erforderlich, heute funktioniert die Eigenschaft überall ohne Präfix.

Ein vollständig undurchsichtiger schwarzer Schatten (0 % Transparenz) kann je nach Hintergrundfarbe unnatürlich oder zu kräftig wirken. Eine geringere Deckkraft mit halbtransparentem Schwarz oder Grau erzeugt einen weicheren Schatten, der sich auf jedem Hintergrund natürlich einfügt.
ツールくん

Übrigens – wie box-shadow die Ausdruckskraft von Webdesign veränderte

Bevor box-shadow in CSS3 standardisiert wurde, bedeutete das Erzeugen eines Schlagschattens im Web meist, ihn vorab in einem Bildbearbeitungsprogramm in ein Hintergrundbild einzurendern, oder ihn durch das Stapeln mehrerer div-Elemente mit Verlaufshintergründen zu imitieren. Schon eine kleine Änderung an Form oder Weichheit des Schattens erforderte ein neues Bild, was die Design-Iteration langsam und teuer machte.

Als Browser um 2009 begannen, box-shadow als Teil von CSS3 zu implementieren, ließ sich ein Schatten mit einer einzigen CSS-Deklaration erzeugen. Bildressourcen waren nicht mehr nötig, Seiten luden leichter, und Schatten behielten ihre Form korrekt bei, auch wenn sich das Layout responsiv an die Bildschirmgröße anpasste.

Als Google 2014 Material Design vorstellte, baute es das Konzept der "elevation" auf box-shadow auf: Jedem Element wird eine Höhe entlang der Z-Achse zugewiesen, und höher platzierte Elemente werfen größere, dunklere Schatten. Das verlieh sonst flachen Oberflächen ein Gefühl von Tiefe und Hierarchie – eine Idee, die viele Designsysteme bis heute prägt.

Weitere Tools in dieser Kategorie