CSS Box Shadow Generator (Schatten)

So funktioniert es

Geben Sie die Schattenfarbe in das linke Feld ein: eine Farbe in einer Zeile, als HEX, RGB oder HSL. Die meisten Oberflächenschatten gehen von reinem Schwarz aus — die Stärke regeln Sie nicht über die Farbe, sondern über den Deckkraft-Regler; 25 Prozent erscheinen im Code als rgba(0, 0, 0, 0.25). Der horizontale und der vertikale Versatz bestimmen, wohin der Schatten fällt: vertikal 8 Pixel und horizontal null ergibt den natürlichen Licht-von-oben-Eindruck, der fast überall verwendet wird. Die Weichzeichnung macht die Kante weicher, die Ausbreitung lässt den Schatten über die Box hinauswachsen; ein negativer Wert zieht ihn unter die Box und erzeugt den dezenten Effekt einer angehobenen Karte. Mit der Richtungsoption wird aus dem Außenschatten ein Innenschatten (inset), der die Box wie eingedrückt wirken lässt. Der Code rechts folgt jeder Änderung — kopieren Sie ihn in Ihr Stylesheet oder speichern Sie die Vorschau als PNG mit 1200×800 Pixeln.

Dieses Werkzeug ist auch als css box shadow generator, box shadow css, css schatten erstellen, schatten generator css, inset schatten css, box shadow beispiele bekannt.

Was ist box-shadow?

box-shadow ist die CSS-Eigenschaft, die außerhalb oder innerhalb einer HTML-Box einen Schatten zeichnet. Sie verlangt mindestens ein Versatzpaar und eine Farbe; Weichzeichnung und Ausbreitung sind optional, das Schlüsselwort inset verlegt den Schatten ins Innere. Der Schatten ändert nie die Größe der Box und fängt keine Klicks — er ist reine Malerei und damit der günstigste Weg, Tiefe zu erzeugen, ohne das Layout zu verschieben. Mit Kommas lassen sich mehrere Schattenebenen stapeln.

Was ist rgba()?

rgba() ist die CSS-Farbnotation, die eine Farbe über die Kanäle Rot, Grün und Blau von 0 bis 255 beschreibt und als vierten Parameter eine Deckkraft zwischen 0 und 1 trägt. rgba(0, 0, 0, 0.25) bedeutet Schwarz mit einem Viertel Stärke — der Untergrund scheint zu 75 Prozent durch. Schattenfarben verwenden fast immer diese Form, weil ein natürlicher Schatten durchscheinend ist und sich mit jedem Hintergrund mischt, auf den er fällt.

Was ist der Unterschied zwischen box-shadow und drop-shadow?

box-shadow zeichnet den Schatten um die rechteckige Box des Elements: Abgerundete Ecken werden übernommen, aber bei einem transparenten PNG oder einer zugeschnittenen Form fällt der Schatten trotzdem als Rechteck. filter: drop-shadow() betrachtet stattdessen die sichtbaren Pixel: Ein Logo auf transparentem Grund wirft einen Schatten, der seiner eigenen Kontur folgt. Dafür kennt drop-shadow keine Ausbreitung und kein inset — für einen Innenschatten oder eine Ausbreitungsebene bleibt nur box-shadow. Die praktische Regel: box-shadow für rechteckige Karten und Panels, drop-shadow für freigestellte Bilder.

Die Falle des harten Schattens: Deckkraft und Weichzeichnung

Der häufigste Anfängerfehler ist ein voll deckender schwarzer Schatten mit wenig Weichzeichnung: Statt weicher Tiefe bekommt die Box einen schmutzigen Rand. Echte Schatten sind durchscheinend und diffus; Oberflächenschatten liegen deshalb meist zwischen 10 und 30 Prozent Deckkraft, mit einer Weichzeichnung von mindestens dem Zwei- bis Dreifachen des Versatzes. Ein Schatten von 0 8 24 Pixeln wirkt bei 25 Prozent natürlich, bei 100 Prozent wie ein Fleck.

Die zweite Falle ist die Leistung: box-shadow wird bei jedem Bild neu gezeichnet. Erhalten Dutzende Boxen auf einer scrollenden Seite einen stark weichgezeichneten Schatten, kann das Scrollen auf älteren Geräten ruckeln. Denselben Eindruck mit weniger Boxen oder geringerer Weichzeichnung zu erreichen senkt die Last meist ohne sichtbaren Unterschied.

Welcher Schatten für welchen Zweck?

Ein Schatten ist keine Dekoration, sondern eine Sprache der Höhe: Nutzer lesen am Schatten ab, welches Element oben liegt.

• Karten und Panels → kleiner Versatz, mittlere Weichzeichnung (etwa 0 2 8): leicht angehoben
• Menüs und Dialoge → großer Versatz und starke Weichzeichnung (etwa 0 12 32): schwebt über der Seite
• Gedrückte Schaltflächen, Eingabefelder → Innenschatten (inset): in die Fläche eingelassen
• Fokus-Markierung → Versatz und Weichzeichnung null, Ausbreitung 2-3 Pixel: umschließt die Box wie ein Ring

Häufige Fragen

Was bedeutet die Reihenfolge der box-shadow-Werte?

Die Reihenfolge ist fest: horizontaler Versatz, vertikaler Versatz, Weichzeichnung, Ausbreitung, dann die Farbe. Ein vorangestelltes inset legt den Schatten in die Box. Dieses Werkzeug schreibt immer alle fünf Werte in genau dieser Reihenfolge, sodass jeder Regler im Code wiederzufinden ist.

Kann ich mehrere Schatten auf eine Box legen?

CSS erlaubt das: Schatten werden durch Kommas getrennt aufgelistet, der erste liegt oben. Dieses Werkzeug erzeugt eine Ebene, damit der Code lesbar bleibt; für zwei Ebenen führen Sie es zweimal mit verschiedenen Einstellungen aus und verbinden die Werte mit einem Komma.

Was speichert die Schaltfläche Herunterladen?

Ein PNG der Vorschau-Karte mit 1200×800 Pixeln — praktisch, um das Aussehen des Schattens in eine Abstimmung oder ein Mock-up zu legen. Für den Code selbst nutzen Sie die Kopieren-Schaltfläche.

Warum steht die Schattenfarbe als rgba im Code?

Weil erst die Transparenz einen Schatten natürlich wirken lässt: Die letzte Zahl in rgba ist die Deckkraft zwischen 0 und 1, und genau die stellt der Regler ein. Mit einer reinen HEX-Farbe würde der Schatten voll deckend gezeichnet und der Untergrund komplett verdeckt.