Tokenlabor

Box-Shadow-Generator für CSS

Box-Shadow-Generator: CSS-Schatten mit Schiebereglern einstellen, mehrere Ebenen und inset kombinieren, Vorschau ansehen und den Code kopieren.

Ebenen
Vorschau
CSS-Code

Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.

CSS box-shadow verstehen

Mit dem Box-Shadow-Generator können Sie einen Schatten erzeugen, ohne die Reihenfolge der Werte im Kopf haben zu müssen. Schieberegler für Versatz, Unschärfe, Ausdehnung und Deckkraft verändern die Vorschau sofort, der passende Code für box-shadow steht darunter zum Kopieren bereit. Vorlagen wie „Karte“ oder „Schwebend“ geben einen Ausgangspunkt, den Sie anpassen können.

Die Eigenschaft CSS box-shadow erwartet die Werte in dieser Reihenfolge: waagerechter Versatz, senkrechter Versatz, Unschärfe, Ausdehnung und Farbe, zum Beispiel 0 4px 12px -2px rgba(0, 0, 0, 0.14). Positive Werte verschieben den Schatten nach rechts und unten. Eine negative Ausdehnung macht den Schatten kleiner als die Box, das wirkt bei weicher Unschärfe natürlicher. Das Schlüsselwort inset legt den Schatten nach innen, etwa für vertiefte Eingabefelder.

Natürlich wirkende CSS-Schatten bestehen oft aus mehreren Ebenen: einer kleinen, dunkleren Ebene nah an der Box und einer großen, sehr hellen Ebene mit viel Unschärfe. Mehrere Schatten trennen Sie mit Kommas; der zuerst genannte liegt oben. Schatten verändern das Layout nicht und nehmen keinen Platz ein, sie können aber von einem Elternelement mit overflow: hidden abgeschnitten werden.

Anleitung: Box-Shadow-Generator in 5 Schritten

  1. Unter „Vorlage“ einen Ausgangspunkt wie Dezent, Karte oder Schwebend wählen.
  2. Mit den Schiebereglern Versatz waagerecht und senkrecht, Unschärfe (blur), Ausdehnung (spread) und Deckkraft einstellen und die Schattenfarbe wählen.
  3. Mit „Ebene hinzufügen“ weitere Schatten ergänzen und bei Bedarf „Innen (inset)“ aktivieren.
  4. Farbe der Box, Hintergrund und Eckenradius an die eigene Seite anpassen und die Vorschau prüfen.
  5. Den CSS-Code kopieren und in das Stylesheet einfügen.

Typische Anwendungsfälle

  • Karten im Layout: Einen weichen, mehrschichtigen Schatten für Produkt- oder Blogkarten erstellen.
  • Eingabefelder: Mit inset einen vertieften Eindruck für Suchfelder oder Formulare erzeugen.
  • Hover-Effekt: Zwei Schattenstärken erzeugen und beim Überfahren mit der Maus wechseln lassen.
  • Rahmen ohne border: Mit spread und ohne Unschärfe eine Kontur zeichnen, die das Layout nicht verschiebt.
Fragen

Häufige Fragen

Was ist der Unterschied zwischen blur und spread?

Blur macht die Kante des Schattens weich, je größer der Wert, desto verschwommener. Spread vergrößert oder verkleinert den Schatten insgesamt, bevor er weichgezeichnet wird. Mit spread und ohne blur lässt sich sogar ein zusätzlicher Rahmen zeichnen.

Wie lege ich mehrere Schatten übereinander?

Trennen Sie die Schatten in box-shadow mit Kommas. Im Generator fügen Sie dafür eine weitere Ebene hinzu. Der erste Schatten in der Liste wird ganz oben gezeichnet.

Warum sieht mein Schatten abgeschnitten aus?

Meist hat ein Elternelement overflow: hidden oder overflow: auto. Geben Sie dem Elternelement etwas Innenabstand oder entfernen Sie die Überlaufbegrenzung.

Schatten für Text oder Bilder mit Transparenz?

box-shadow folgt immer dem Rechteck der Box und ihrem border-radius. Für Text nutzen Sie text-shadow, für freigestellte PNG- oder SVG-Grafiken filter: drop-shadow(), das sich an der sichtbaren Form orientiert.

Wie mache ich mit CSS box-shadow einen Schatten nur unten?

Senkrechten Versatz positiv setzen, waagerechten auf 0 und die Ausdehnung negativ, etwa box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.3). Die negative Ausdehnung zieht den Schatten an den Seiten ein, sodass er nur unter der Box sichtbar ist.

Wie animiere ich einen box-shadow beim Hover?

Legen Sie für :hover einen zweiten box-shadow fest und ergänzen Sie transition: box-shadow 0.2s. Beide Schattenlisten sollten gleich viele Ebenen haben, damit der Übergang gleichmäßig verläuft.

Weitere Werkzeuge

Das könnte auch helfen

Alle 358 Werkzeuge

Farbumwandler

HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.

Öffnen

Farbpalette aus Bild

Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.

Öffnen

Kontrast prüfen (WCAG)

Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.

Öffnen

CSS-Gradient-Generator

Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.

Öffnen

Flexbox-Generator

Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.

Öffnen

CSS-Grid-Generator

Spalten, Zeilen und Abstände für CSS Grid festlegen, Vorschau prüfen und CSS kopieren.

Öffnen