Wichtigste Erkenntnisse
- 01Jeder box-shadow-Parameter hat seinen eigenen Schieberegler plus eine numerische Eingabe für Pixel-genaue Abstimmung.
- 02Der Inset-Schalter wechselt zwischen Schlagschatten und Innenschatten für gedrückte oder neumorphe Effekte.
- 03Farbe und Deckkraft werden separat gesteuert und geben rgba() für lesbares CSS aus.
- 04Die Vorschau verwendet die echte CSS-Eigenschaft auf einem echten Element — was Sie sehen, ist genau das, was Ihr Stylesheet rendert.
Warum einen visuellen Box-Shadow-Generator verwenden
CSS box-shadow akzeptiert bis zu sechs Werte — horizontaler Versatz, vertikaler Versatz, Unschärferadius, Ausbreitungsradius, Farbe und ein optionales Inset-Schlüsselwort. Einfache Schatten aus dem Gedächtnis zu tippen funktioniert für einfache Fälle, aber für alles Differenziertere — ein enger Glanz, ein tiefer Schlagschatten, eine weiche Erhebungsebene — raten Sie und laden neu, bis etwas richtig aussieht.
Ein visueller Generator verkürzt diese Iterationsschleife. Verschieben Sie einen Schieberegler, sehen Sie die Änderung sofort und kopieren Sie nur, wenn Sie zufrieden sind. Der Box-Shadow-Generator von Handytool läuft vollständig in Ihrem Browser, daher ist die Vorschau die echte CSS-Eigenschaft, die auf ein echtes Element angewendet wird — keine Rendering-Unterschiede zwischen dem Tool und Ihrer tatsächlichen Seite.
So entwerfen Sie einen Box Shadow
- 01
Passen Sie die horizontalen und vertikalen Versätze an
Positive Werte verschieben den Schatten nach rechts und unten. Negative Werte verschieben ihn nach links und oben. Ein zentrierter Schatten (0, 0) erzeugt einen Glanzeffekt.
- 02
Stellen Sie den Unschärferadius ein
Höhere Unschärfewerte erzeugen weichere, diffusere Schatten. Null Unschärfe erzeugt einen harten, soliden Schattenumriss.
- 03
Passen Sie den Ausbreitungsradius an
Positive Ausbreitung vergrößert den Schatten vor der Unschärfe. Negative Ausbreitung verkleinert ihn, was für enge Schatten unter Elementen nützlich ist.
- 04
Wählen Sie eine Farbe und Deckkraft
Verwenden Sie die Farbauswahl, um den Schattenton zu wählen, und reduzieren Sie dann die Deckkraft für Subtilität. Die Ausgabe verwendet rgba(), um die Werte lesbar zu halten.
- 05
Schalten Sie Inset um, falls erforderlich
Inset wechselt von einem Schlagschatten zu einem Innenschatten — nützlich für gedrückte Schaltflächen, versunkene Eingaben und neumorphe Oberflächen.
- 06
Kopieren Sie die CSS-Deklaration
Klicken Sie auf Kopieren, um den vollständigen box-shadow-Wert zu erfassen und in Ihr Stylesheet einzufügen.
Kein Upload, kein Konto
Der Generator ist vollständig clientseitig. Ihre Farbwahl, numerische Werte und Vorschauzustände bleiben in Ihrem Browser — nichts wird an einen Server gesendet. Es gibt kein Konto zum Erstellen und keine Nutzungsbeschränkung.
Da das Vorschauelement die echte CSS box-shadow-Eigenschaft verwendet, ist die Ausgabe per Definition genau — es gibt keine Canvas-Rendering- oder Screenshot-Annäherung. Die Pixelwerte, die Sie kopieren, sind die Pixelwerte, die der Browser anwendet.
Box-Shadow-Generator – Häufig gestellte Fragen
Was bewirkt der Spread-Wert?
Positive Ausbreitung vergrößert den Schatten in alle Richtungen, bevor die Unschärfe angewendet wird; negative Ausbreitung verkleinert ihn. Nützlich für enge, definierte Glanzeffekte in Kombination mit niedriger Unschärfe.
Kann ich mehrere Box Shadows hinzufügen?
Dieser Generator gibt jeweils einen Schatten aus. Um sie zu überlagern, kopieren Sie den Wert und trennen mehrere Schatten mit Kommas in Ihrem CSS — box-shadow akzeptiert eine durch Kommas getrennte Liste.
Warum ist mein Innenschatten unsichtbar?
Innenschatten werden innerhalb des Elements gezeichnet, daher benötigen sie eine Hintergrundfarbe oder sichtbares Padding, um angezeigt zu werden. Sie werden auf transparenten oder Elementen mit Nullgröße nicht angezeigt.
Ist die Vorschau pixelgenau?
Ja — die Vorschau verwendet die echte CSS box-shadow-Eigenschaft auf einem echten DOM-Element, daher ist das, was Sie sehen, genau das, was Ihr Stylesheet produziert.
Was ist ein neumorphischer Schatten?
Neumorphismus verwendet zwei Schatten — einen hellen und einen dunklen — die in entgegengesetzten Richtungen versetzt sind, um ein Element erhaben oder von einer flachen Oberfläche gedrückt erscheinen zu lassen. Beide Schatten sind typischerweise Inset für die gedrückte Variante.