Erstellen Sie moderne Schatteneffekte mit Weichzeichnung, Ausbreitung und Farbe.
Der CSS-Befehl box-shadow verleiht flachen Benutzeroberflächen räumliche Tiefe, visuelle Hierarchie und haptisches Feedback. Dieser interaktive Box-Shadow-Generator berechnet präzise X- und Y-Verschiebungen, Weichzeichnungsradien (Blur), Ausbreitungsradien (Spread) sowie RGBA-Farbwerte und unterstützt sowohl nach außen gerichtete Schlagschatten als auch innere Schatten (Inset) für moderne UI-Designs.
Ein Frontend-Entwickler gestaltet eine wiederverwendbare Card-Komponente für ein SaaS-Dashboard und benötigt realistische Tiefenebenen nach Vorbild von Googles Material Design. Er wählt die vordefinierte Ebene Elevation 3 und verfeinert die Parameter: eine vertikale Verschiebung von 8 Pixeln, ein Weichzeichnungsradius von 16 Pixeln, ein Spread von -2 Pixeln und ein transparenter Farbwert von rgba(15, 23, 42, 0.12). Für einen besonders natürlichen Look fügt er über die Mehrschicht-Funktion einen zweiten, dezenten Umgebungsschatten hinzu und kopiert den optimierten zweizeiligen CSS-Code mit einem Klick in sein Stylesheet.
Sämtliche Schattenberechnungen und die interaktive visuelle Vorschau erfolgen ausnahmslos im lokalen Arbeitsspeicher Ihres Webbrowsers. Es werden zu keinem Zeitpunkt Farbpaletten, Design-Parameter oder Layout-Entwürfe an externe Server übermittelt, was Ihnen maximale Gestaltungsfreiheit und vollen Urheberschutz sichert.
box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color> ;
Definiert horizontale und vertikale Schattenpositionen, die Unschärfe und Größenausdehnung sowie den Alphakanal der Schattenfarbe.