CSS Box-Shadow-Generator

Mehrstufige Box-Shadows visuell gestalten und produktionsreifen CSS-Code sofort kopieren.

Was ist das?

Der CSS-Box-Shadow-Generator ist ein kostenloser, visueller Editor für die perfekte `box-shadow`-Eigenschaft. Statt Offset-Werte und Blur-Radien manuell zu raten, schieben Sie Regler und sehen das Ergebnis live. Sie können mehrere Shadow-Layer stapeln und zwischen Normal- und Inset-Modus wechseln. Mit einem Klick kopieren Sie das fertige CSS.

So wird es verwendet

Die Vorschau-Karte zeigt Ihren Schatten in Echtzeit. Beginnen Sie mit den horizontalen und vertikalen Offset-Reglern.
Erhöhen Sie den Blur-Regler für einen weichen Schatten oder halten Sie ihn niedrig für einen harten Rand.
Wählen Sie eine Farbe und stellen Sie die Deckkraft ein, um den Schatten natürlich einzublenden.
Aktivieren Sie "Inset" um den Schatten ins Innere des Elements zu verlegen.
Klicken Sie auf "+ Layer hinzufügen" für weitere Schatten. Klicken Sie auf "CSS kopieren" wenn Sie fertig sind.

Warum dieses Tool

CSS box-shadow von Hand zu schreiben ist fehleranfällig und langsam. Dieses Tool bietet einen visuellen Echtzeit-Editor für sichere Schatten-Designs, einschließlich mehrstufiger Kompositionen. Der exportierte Code ist sauber und sofort verwendbar.

Häufige Fragen

Wie viele Shadow-Layer kann ich hinzufügen?

Sie können bis zu 5 unabhängige Layer hinzufügen. CSS unterstützt native mehrere box-shadow-Werte als kommagetrennte Liste.

Was bewirkt der "Inset"-Schalter?

Inset-Schatten erscheinen innerhalb des Elements statt außen. Perfekt für eingesenkte oder gravierte Effekte.

Kann ich das Ergebnis als Bild exportieren?

Ja. Klicken Sie auf "PNG exportieren" um einen Screenshot der Vorschaukarte zu speichern.

Unterstützt dieses Tool auch text-shadow?

Dieses Tool konzentriert sich auf die CSS `box-shadow`-Eigenschaft. Für Textschatten empfehlen wir einen dedizierten text-shadow-Generator.

Welche Einheiten verwendet das exportierte CSS?

Alle Werte werden in Pixel (px) exportiert. Für relative Einheiten können Sie die Werte manuell anpassen.