CSS-box-shadow-Generator
Gestalte CSS-box-shadow-Schatten visuell mit Live-Vorschau und kopierfertigem Code, alles in deinem Browser.
CSS-box-shadow-Generator wird geladen… Wenn nichts passiert, aktiviere JavaScript.
Die CSS-Eigenschaft box-shadow malt einen Schatten um den Rahmen eines Elements, und sie ist eines der wichtigsten Werkzeuge, um einer flachen Weboberfläche ein Gefühl von Tiefe und Hierarchie zu geben. Ein gut bemessener Schatten sagt dem Nutzer, dass eine Karte über der Seite liegt, dass eine Schaltfläche drückbar ist, dass ein Dropdown über dem darunterliegenden Inhalt schwebt. Die Eigenschaft ist täuschend reichhaltig: eine einzige Deklaration steuert einen horizontalen Versatz, einen vertikalen Versatz, einen Weichzeichnungsradius, einen Ausbreitungsradius, eine Farbe und ob der Schatten außerhalb des Elements fällt oder als inset in es hineingeschnitten wird. Diese Werte durch blindes Bearbeiten von Zahlen natürlich wirken zu lassen ist langsam, was genau der Grund ist, warum ein visueller Generator hilft.
Häufig gestellte Fragen
Wird etwas hochgeladen, wenn ich einen Schatten gestalte?
Was steuert jeder box-shadow-Wert?
Was ist der Unterschied zwischen Weichzeichnung und Ausbreitung?
Was bewirkt die inset-Option?
Warum verwendet die erzeugte Farbe rgba statt eines Hex-Werts?
Kann ich mehrere gestapelte Schatten erstellen?
Funktionieren diese Schatten in allen Browsern?
Wie mache ich einen weichen, realistischen Schatten statt eines harten?
Über CSS-box-shadow-Generator
Dieser Generator gibt dir eine Live-Vorschaubox und einen Schieberegler für jeden Parameter, sodass du die Wirkung jeder Änderung sofort siehst. Die Versatzwerte verschieben den Schatten nach links, rechts, oben oder unten, um eine Lichtquelle anzudeuten. Der Weichzeichnungsradius weicht die Kante auf, wobei null einen hartkantigen Schatten erzeugt und größere Werte ein diffuses Glühen. Der Ausbreitungsradius vergrößert oder verkleinert den Schatten, bevor die Weichzeichnung angewendet wird, was nützlich ist, um den Fußabdruck zu straffen oder auszuweiten. Ein Farbwähler und ein Deckkraftregler verbinden sich zur endgültigen Schattenfarbe, und ein inset-Kontrollkästchen wechselt zwischen einem äußeren Schlagschatten und einem inneren Schatten, der ein Element gedrückt oder vertieft aussehen lässt.
Während du die Steuerelemente anpasst, schreibt das Werkzeug die exakte box-shadow-Deklaration in standardmäßigem, herstellerpräfixfreiem CSS aus, bereit zum Kopieren in deine Zwischenablage mit einem Klick. Die Ausgabe verwendet eine rgba-Farbe, damit die Deckkraft korrekt eingebacken ist, was die Art ist, wie Schatten in der echten Welt fast immer geschrieben werden, da reines Schwarz bei voller Stärke schwer und künstlich aussieht. Die Vorschau sitzt auf einem Schachbrettmuster, damit du weiche und halbtransparente Schatten genau beurteilen kannst, statt gegen eine einzige flache Farbe.
Alles läuft lokal in deinem Browser, ohne Uploads, ohne Konto und ohne Tracking, und es funktioniert weiter offline, sobald die Seite geladen ist. Es gibt nichts irgendwohin zu senden, weil die ganze Aufgabe darin besteht, eine kurze Zeichenkette CSS zu erzeugen. Das Ergebnis ist eine schnelle, greifbare Art, die präzise Erhebung einzustellen, die eine Komponente braucht, und produktionsreifen Code zu kopieren, ohne sich die Reihenfolge der box-shadow-Werte zu merken oder das rgba-Alpha durch Versuch und Irrtum von Hand abzustimmen.
Wie Schatten ins Webdesign kamen, gingen und zurückkehrten
Vor CSS3 bedeutete ein Schatten auf einer Box Bilder. Designer exportierten die Schattenkanten als PNG-Schnipsel und bauten sie mit zusätzlichen Wrapper-Divs um ein Element herum zusammen, eine fragile Technik, die brach, sobald sich die Box in der Größe änderte, und mehrere HTTP-Anfragen pro Komponente hinzufügte. Die box-shadow-Eigenschaft, standardisiert als Teil des CSS-Moduls Backgrounds and Borders, kam um 2009 mit Herstellerpräfixen in Form von -webkit-box-shadow und -moz-box-shadow, und alle Browser zu erreichen dauerte noch einige Jahre, bis Internet Explorer 9 die Unterstützung hinzufügte.
Sobald native Schatten verfügbar waren, durchlief das Web eine stark beschattete Phase. Das skeuomorphe Design, das in den frühen 2010er Jahren seinen Höhepunkt erreichte und von Apples iOS-Oberflächen jener Ära verkörpert wurde, stützte sich stark auf Schatten, Verläufe und Abschrägungen, um Elemente auf dem Bildschirm physische Objekte nachahmen zu lassen: Schaltflächen, die wie aus Glas geschnitten aussahen, Paneele mit genähtem Leder, Schalter mit tiefen Schlagschatten. Die box-shadow-Eigenschaft war zentral für diese Optik, oft mehrere Lagen tief auf einem einzigen Element gestapelt.
Dann schwang das Pendel zurück. Das flache Design, popularisiert durch Microsofts Metro-Sprache und Apples eigene iOS-7-Neugestaltung im Jahr 2013, entfernte Schatten fast vollständig zugunsten von Volltonfarbe und klarer Typografie. Aber reine Flachheit machte es schwer zu erkennen, was anklickbar war, also entstand ein Mittelweg. Googles Material Design fasste Schatten nicht als Dekoration neu auf, sondern als ein System der Erhebung, bei dem die Größe und Weichheit eines Schattens vermittelt, wie weit ein Element über der darunterliegenden Oberfläche schwebt. Diese Idee bleibt bis heute die vorherrschende Konvention, weshalb das Denken über Schatten in Begriffen der Erhebung statt nur der Dunkelheit Oberflächen hervorbringt, die sich kohärent und intuitiv anfühlen.