CSS-Box-Shadows erzeugen
Bis zu 8 Box-Shadow-Ebenen mit Versatz, Unschärfe, Ausbreitung, Farbe und Inset stapeln, live ansehen und das CSS kopieren.
- Läuft im Browser
- Kein Upload
- Ergebnis bleibt auf deinem Gerät
Datenschutz & GrenzenLäuft in deinem Browser. Nichts wird hochgeladen.
Eingabeinhalte bleiben in diesem Tab; Refentra lädt sie nicht hoch und speichert sie nicht. Optionale aggregierte Aktionszahlen werden nur mit deiner Einwilligung zur Nutzungsmessung gesendet. Leere den Arbeitsbereich anschließend.
Unterstütztes Profil: 1–8 editierbare px-Ebenen, inset und Alpha 0–1; Blur darf nicht negativ sein.
Maximal 200.000 UTF-16-Einheiten; Parserlimits können kleiner sein. Worker: 15 Sekunden (Regex 1,5 Sekunden).
Eingabe und Ergebnis nachvollziehen
- Vorbereiten und Vorgang wählen
Lege für jede Ebene den horizontalen und vertikalen Versatz, die Unschärfe, die Ausdehnung, die Farbe und das Alpha fest. Mit inset entsteht ein Schatten nach innen.
- Ein konkretes Beispiel prüfen
Nutze dieses Beispiel und vergleiche das angegebene Ergebnis: x=0 y=4 blur=8 spread=0 color=#000000 alpha=0.25 → 0px 4px 8px 0px rgba(0, 0, 0, 0.25)
- Ausgabe vor dem Übernehmen prüfen
Sieh dir den zusammengesetzten Schatten auf einem Hintergrund mit starkem Kontrast an. Mehrere Ebenen werden durch Kommas getrennt und behalten ihre Reihenfolge.
Antworten zu dieser Aufgabe
Warum verschwindet ein Schatten nach dem Kopieren?
Ein übergeordnetes Element mit Beschneidung oder Overflow kann ihn abschneiden. Auch Alpha 0 oder ein gleicher Hintergrund kann einen gültigen Schatten verbergen.
Was prüfe ich bei einem Eingabefehler?
Verwende 1–8 gültige Ebenen. Die Unschärfe darf nicht negativ sein, das Alpha liegt zwischen 0 und 1. Versatz und Ausdehnung dürfen negativ sein.
Wo sind die Grenzen dieses Werkzeugs?
Die Ausgabe gestaltet die Box des Elements. Sie erzeugt keinen Textschatten und folgt nicht der Kontur eines Bildes mit Transparenz.