Handytool
EntwicklerKostenlosLäuft lokal

CSS-Box-Shadow-Generator

Gestalte CSS-Box-Shadow-Werte mit Live-Vorschau — Offsets, Blur, Spread, Deckkraft und Inset.

Vorschau
CSS
box-shadow: 0px 8px 24px -4px rgba(10, 10, 10, 0.18);

Passe die Schieberegler an, um den Schatten zu gestalten – kopiere das CSS, wenn es richtig aussieht.

Über CSS-Box-Shadow-Generator

Handytool's Box-Shadow-Generator gibt dir Slider für Offset, Blur, Spread, Farbe und Deckkraft — und eine Live-Vorschau-Karte, die sich aktualisiert, während du ziehst. Schalte Inset-Schatten um, stelle eine Farbe über den Picker ein, und kopiere die resultierende box-shadow-CSS-Erklärung direkt in dein Stylesheet. Das ganze Werkzeug läuft in deinem Browser; nichts wird hochgeladen.

Funktionen von CSS-Box-Shadow-Generator

  • 01

    Jeder Parameter als Slider

    Horizontale und vertikale Offsets, Blur-Radius, Spread-Radius und Deckkraft haben jeweils ihren eigenen Slider plus numerischen Input — verfeinere durch Ziehen, dann verschiebe mit der Tastatur für Pixel-Präzision.

  • 02

    Inset-Schatten unterstützt

    Schalte den Inset-Toggle um, um von einem Drop-Shadow zu einem inneren Schatten zu wechseln — nützlich für gedrückte Buttons, versunkene Eingaben und neumorphe Oberflächen.

  • 03

    Farbe + Deckkraft, separat

    Wähle die Basis-Farbe in einem beliebigen Hex-Wert, dann stelle die Deckkraft unabhängig ein. Die Ausgabe verwendet rgba(), damit Farbe und Alpha lesbar bleiben, wenn du das CSS kopierst.

FAQ zu CSS-Box-Shadow-Generator

Was macht der Spread-Wert?
Positive Spread vergrößert den Schatten in alle Richtungen, bevor der Blur angewendet wird; negative Spread schrumpft ihn. Es ist nützlich für enge, definierte Glows, wenn es mit kleinem Blur kombiniert wird.
Kann ich mehrere Schatten hinzufügen?
Dieser Generator gibt eine einzelne Shadow-Deklaration aus. Um Schatten zu layern, kopiere den Wert, dann füge ihn zweimal in dein CSS ein, getrennt durch ein Komma — box-shadow akzeptiert eine komma-getrennte Liste.
Warum ist mein Inset-Schatten unsichtbar?
Inset-Schatten werden innen in das Element gezeichnet, also brauchen sie eine Hintergrund-Farbe oder Padding, um sichtbar zu sein. Sie werden auch nicht auf transparenten oder Null-großen Elementen angezeigt.
Ist die Vorschau Pixel-genau?
Ja — die Vorschau verwendet die tatsächliche CSS-Box-Shadow-Eigenschaft auf einem echten Element, so siehst du genau, was dein Stylesheet rendern wird.

Verwandte Werkzeuge

Entwickler →

Weitere Tools entdecken

Alle Werkzeuge →