SuperDevTools
DE

Box Shadow Generator: CSS Schatten erstellen

box-shadow wirft den Schatten des Element-Rahmens: Karte, Button, Box, Formularfeld.

Vorlagen:

Schatten

Der erste Schatten der Liste liegt über den folgenden. Die Pfeile ändern die Reihenfolge; ohne Haken bei „Aktiv“ fällt ein Schatten aus dem Code, bleibt aber erhalten.

    Form und Hintergrund

    CSS-Code

    Alles wird in Ihrem Browser berechnet: Es wird nichts gesendet. Die letzten Einstellungen bleiben auf diesem Gerät.

    Schatten nach Augenmaß einstellen, sauberen CSS-Code kopieren

    Dieser Box Shadow Generator zeichnet den Schatten auf eine Vorschauform und schreibt den Code gleich mit. Sie können bis zu 8 Schatten stapeln, jeden per Schieberegler einstellen und eine aufgeräumte box-shadow-Deklaration kopieren. Zwei weitere Reiter tun dasselbe für text-shadow und filter: drop-shadow(). Alles wird in Ihrem Browser berechnet, es wird nichts gesendet.

    So erstellen Sie einen CSS Schatten

    1. Wählen Sie den Reiter: „box-shadow“ für Karten und Buttons, „text-shadow“ für Überschriften, „filter: drop-shadow()“ für Logos und freigestellte Bilder.
    2. Stellen Sie jeden Schatten ein: „Versatz X (px)“, „Versatz Y (px)“, „Unschärfe (px)“, „Ausdehnung (px)“, „Farbe“ und „Deckkraft (%)“. Mit „Innen (inset)“ wirkt die Fläche eingedrückt.
    3. „Schatten hinzufügen“ legt eine weitere Ebene an. Die Pfeile ↑ und ↓ ändern die Reihenfolge, × löscht, und ohne Haken bei „Aktiv“ fällt der Schatten aus dem Code, behält aber seine Werte.
    4. Unter „Form und Hintergrund“ ändern Sie Breite, Höhe, „Eckenradius (px)“ und Farben, oder Sie wählen „Dunkler Hintergrund“, um den Dark Mode zu prüfen.
    5. Wählen Sie das Farbformat (rgba() oder „8-stelliges HEX“), setzen Sie bei Bedarf den Haken bei „CSS-Variablen“ und klicken Sie auf „Code kopieren“. „Link kopieren“ hält alle Einstellungen in der Adresse fest.

    Acht Vorlagen, von „Weich“ bis „Leuchten“, dienen als Startpunkt.

    Die Eigenschaft box-shadow und ihre Syntax

    Beim ersten Aufruf schreibt das Tool:

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    • Versatz X: positiv nach rechts, negativ nach links. Hier 0.
    • Versatz Y: positiv nach unten. Hier 4px, als käme das Licht von oben.
    • Unschärfe: die Breite des Verlaufs. 0 ergibt eine harte Kante; negative Werte sind nicht erlaubt.
    • Ausdehnung: vergrößert den Schatten (positiv) oder verkleinert ihn (negativ), bevor er weichgezeichnet wird. Fehlt sie, gilt 0.
    • Farbe: hier Schwarz mit 15 % Deckkraft. Als 8-stelliges HEX lautet dieselbe Farbe #00000026: Die letzten beiden Stellen speichern die Deckkraft, 38 von 255.

    Nullen lässt das Tool nur weg, wenn es gefahrlos geht: Eine Ausdehnung von 0 entfällt, eine Unschärfe von 0 ebenfalls, solange keine Ausdehnung folgt. Deshalb behält 0 0 0 2px #1f5fe0 seine Null; sonst würden die 2px als Unschärfe gelesen.

    Mehrere Schatten und inset

    Mehrere Schatten trennt ein Komma, der erste liegt oben. Die Vorlage „Geschichtet“ stapelt fünf Schatten mit 1, 2, 4, 8 und 16 px bei je 7 %: Das wirkt natürlicher als ein einziger großer Schatten. Das Schlüsselwort inset legt den Schatten in die Box hinein, wie bei einem vertieften Eingabefeld.

    text-shadow und drop-shadow

    text-shadow folgt den Buchstaben und kennt weder Ausdehnung noch inset. filter: drop-shadow() schattiert die sichtbaren Pixel: Bei einem <img> mit transparentem PNG oder bei einem SVG-Icon schmiegt sich der Schatten an die Grafik, während box-shadow das ganze Rechteck schattiert. Die Vorschau zeigt beide Sterne nebeneinander.

    Bewährte Praxis

    • Eine Lichtquelle. Behalten Sie auf der ganzen Website dieselbe Versatzrichtung bei, meist nach unten.
    • Weiche, einheitliche Schatten. 10 bis 25 % Deckkraft reichen oft. Legen Sie zwei oder drei Stufen fest und verwenden Sie sie wieder; die Option „CSS-Variablen“ schreibt --shadow-1, --shadow-2 usw.
    • Leistung. Sehr große, weiche Schatten zu animieren kann auf einfachen Smartphones ruckeln; meist ist es besser, die Deckkraft eines festen Schattens zu animieren.
    • Barrierefreiheit. Ein Schatten ersetzt keinen Kontrast: Buttons und Formularfelder müssen auch ohne ihn erkennbar sein, etwa durch einen Rahmen oder eine kräftige Hintergrundfarbe.

    Häufige Fragen

    Warum sehe ich meinen Schatten nicht?

    Prüfen Sie die Deckkraft, den Haken bei „Aktiv“ und die Seitenfarbe: Schwarz mit 10 % verschwindet auf dunklem Grund fast ganz, dort hilft ein kräftigerer Schatten oder ein helles Leuchten. Ein Elternelement mit overflow: hidden schneidet überstehende Schatten ebenfalls ab.

    rgba oder 8-stelliges HEX?

    Für den Browser ist es gleich. rgba(0, 0, 0, 0.25) und #00000040 sind dasselbe Schwarz mit 25 %. Nehmen Sie das Format, das Ihr Stylesheet schon verwendet.

    Wie entsteht der Neumorphismus-Effekt?

    Es braucht zwei entgegengesetzte Schatten auf einer Form in der Farbe der Seite. Die Vorlage setzt beide auf #e4e9f0, mit einem dunklen Schatten unten rechts (8px 8px) und einem weißen oben links (-8px -8px). Der Kontrast bleibt gering, also eher für Dekoration.

    Werden meine Einstellungen gespeichert?

    Die letzten Einstellungen bleiben im Speicher Ihres Browsers und stehen zusätzlich in der Adresse der Seite. Für ein anderes Gerät nutzen Sie „Link kopieren“.