Zum Inhalt springen

CSS-Box-Shadow-Generator

Stelle einen Schatten ein, prüfe ihn am Testfeld und kopiere das CSS.

Schatten einstellen

Verarbeitung im Browser.

−200 bis 200 px.

−200 bis 200 px.

0–200 px; nicht negativ.

−200 bis 200 px.

Deckendes HEX mit 3 oder 6 Stellen.

0 ist transparent, 1 ist deckend.

Erzeugter Schatten

Stelle den Schatten ein und erzeuge anschließend das CSS.

CSS-Box-Shadow erstellen

Erzeuge einen einzelnen äußeren oder inneren Schatten und kopiere genau den geprüften Wert.

  1. X- und Y-Versatz eingeben.
  2. Weichzeichnung und Ausbreitung festlegen.
  3. Farbe und Deckkraft eingeben.
  4. Außen oder Innen wählen.
  5. Erzeugen, prüfen und kopieren.

Vier Längen

X und Y verschieben den Schatten. Blur macht ihn weich und darf nicht negativ sein. Spread erweitert bei positiven und verkleinert bei negativen Werten.

Außen und innen

inset zeichnet innerhalb des Feldes. Ein äußerer Schatten liegt hinter dem Rahmen und verändert das Layout nicht.

Bestätigter Zustand

Bearbeiten oder Leeren entfernt Vorschau und Kopierwert bis zur nächsten gültigen Erzeugung.

Grenzen

  • Nur eine Schattenebene.
  • Kein vollständiger Komponenten- oder Animationseditor.

Beispiele

12px 12px 24px 0 rgba(0,0,0,.3).

inset 0 4px 8px -2px rgba(0,0,0,.5).

Häufige Fragen

Darf Blur negativ sein?

Nein, CSS lässt das nicht zu.

Darf Spread negativ sein?

Ja, das verkleinert die Schattenform.