Wie erstelle ich einen CSS-Box-Shadow und kopiere den Code?

Passen Sie die Schieberegler für X- und Y-Versatz, Weichzeichnung, Streuung, Farbe und Deckkraft an und beobachten Sie die Live-Vorschau. Drücken Sie dann in der CSS-Ausgabe auf Kopieren. Sie können auch mit Voreinstellungen wie Weich, Leuchten oder Material 8 beginnen.

Kann ich mehrere Schatten auf einem Element stapeln?

Ja. Drücken Sie + Weitere Schattenebene, um weitere Ebenen hinzuzufügen, und ordnen Sie sie dann neu, blenden Sie sie aus oder entfernen Sie sie. Die Ebenen werden in einem einzigen box-shadow-Wert durch Kommas verbunden.

Wie erstelle ich einen inneren Schatten?

Wählen Sie eine Ebene aus und aktivieren Sie Innerer Schatten oder laden Sie die Voreinstellung Eingebettet. Die Ausgabe enthält dann das Schlüsselwort inset für diese Ebene.

Kann ich eine Tailwind-Klasse anstelle von reinem CSS erhalten?

Ja. Neben der CSS-Deklaration gibt das Tool eine Tailwind-Arbitrary-Value-Klasse in der Form shadow-[...] aus, wobei Leerzeichen durch Unterstriche ersetzt werden, bereit zum Einfügen in Ihr Markup.

Gibt es einen einfacheren Weg, die Schattenposition festzulegen, als mit den Schiebereglern?

Ja. Ziehen Sie das Vorschaufeld, um den Schatten der aktiven Ebene zu verschieben, und halten Sie die Umschalttaste für eine feinere Steuerung gedrückt. Sie können auch den Vorschau-Hintergrund und die Box-Farbe ändern, um zu sehen, wie der Schatten auf Ihrem Design wirkt.

Ist es wirklich kostenlos?

Ja. Jedes Tool ist kostenlos nutzbar, ohne Konto und ohne Kreditkarte. Die Verarbeitung läuft auf Ihrem Gerät statt auf unseren Servern – genau deshalb können wir den Dienst kostenlos betreiben.

Funktioniert es auf Mobilgeräten?

Ja. Es läuft in aktuellen mobilen Browsern unter iOS und Android, ohne dass etwas installiert werden muss.

🎨

CSS-Box-Shadow-Generator – kostenlos

Visueller Builder für CSS box-shadow mit Live-Vorschau, mehrschichtiger Stapelung, Farbwähler, Inset-Umschalter und Ein-Klick-Kopieren. Enthält Material-, Neumorphismus- und Glow-Voreinstellungen.

Läuft in Ihrem BrowserKein Konto, keine Pop-upsKeine Anmeldung erforderlichFür immer kostenlos

Funktioniert nach dem Laden offline

Vorschau-Hintergrund

Ziehen Sie das Feld, um den Schatten der aktiven Ebene zu positionieren – halten Sie Umschalt für Feinsteuerung

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

Voreinstellungen

Box-Farbe

Eckenradius (16px)

x (0px)

y (4px)

Unschärfe (12px)

Ausbreitung (0px)

Farbe

Deckkraft (15%)

Innerer Schatten

Häufige Anwendungen

Kartenschatten der BenutzeroberflächeErstellen Sie elegante Kartenschatten für Dashboards, Produktraster und Dashboards.
SchaltflächendruckeffekteErstellen Sie Schaltflächenschatten, die realen Tiefeneindruck und Druckzustände nachahmen.
Neumorphismus Soft UIErstellen Sie das Soft-UI-Neumorphismus-Erscheinungsbild mit gekoppelten hellen + dunklen Schatten.
Modal- und Popover-SchattenErstellen Sie das gehobene, schwebende Gefühl für Dialoge und Dropdowns.
Leucht- und Fokusring-EffekteErstellen Sie Leuchteffekte, Fokusringe und Neon-ähnliche Highlights.

So funktioniert es

Der Box-Shadow-Generator ist ein vollständig clientseitiges React-Tool – kein Server, keine Bibliothek. Er verwaltet eine Liste von Schattenebenen im State, setzt bei jeder Änderung mit einem selbst geschriebenen rgba()-Formatierer gültige CSS-box-shadow-Zeichenketten zusammen und wendet sie über Reacts style-Prop direkt auf ein Vorschauelement an, sodass die Rendering-Engine des Browsers das Ergebnis sofort zeichnet.

1
Ebenenparameter speisen den Formatierer
Jede Schattenebene speichert x/y-Versatz, Unschärfe, Ausbreitung, eine Hex-Farbe und eine Deckkraft. Bei jeder Änderung wandelt eine kleine Funktion shadowToCss die Hex-Farbe per Regex in RGB-Komponenten um und setzt die rgba()-Zeichenkette zusammen – zum Beispiel 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Mehrere Ebenen werden mit Kommas verbunden.
2
Der Browser rendert die Live-Vorschau
Die zusammengesetzte Zeichenkette wird direkt in JSX der boxShadow-Style-Eigenschaft eines div zugewiesen. React aktualisiert das DOM-Attribut, und die CSS-Engine des Browsers malt den Schatten sofort – kein Canvas oder WebGL, nur natives CSS-Rendering.
3
Positionieren per Ziehen nutzt die Pointer Events API
Klicken und Ziehen der Vorschaubox ruft setPointerCapture auf dem Element auf und verfolgt dann die onPointerMove-Differenzen, um x- und y-Versatz der aktiven Ebene in Echtzeit zu aktualisieren. Gedrückte Umschalttaste wendet einen Faktor von 0,25 für feine Positionierung an.
4
Die Ausgabe wird in die Zwischenablage kopiert
Das Tool erzeugt aus denselben Ebenendaten zwei Ausgabeformate: eine Standard-CSS-box-shadow-Deklaration und eine Tailwind-Klasse mit beliebigem Wert (shadow-[...]), bei der Leerzeichen gemäß Tailwind-Syntax durch Unterstriche ersetzt werden. Das Kopieren mit einem Klick nutzt navigator.clipboard.writeText.

CSS-Box-Shadow-Generator – kostenlos

Häufige Anwendungen

So funktioniert es

Ähnliche Tools

CSS-Border-Radius-Generator

CSS-Grid-Generator

CSS-Flexbox-Generator

Häufige Fragen