6XC

CSS-Box-Shadow-Generator

Gestalten Sie einen box-shadow visuell — Versatz, Unschärfe, Ausdehnung, Farbe, Deckkraft und Inset — mit Live-Vorschau.

811 Aufrufe

Die box-shadow-Eigenschaft

Syntax: box-shadow: x y Unschärfe Ausdehnung Farbe. Die Versätze verschieben den Schatten, Unschärfe weicht seine Kante auf, Ausdehnung vergrößert oder verkleinert ihn, und die Farbe trägt für Realismus meist Alpha (z. B. rgba(0,0,0,0.15)). Fügen Sie inset hinzu, um den Schatten innerhalb der Box zu zeichnen. Weiche Schatten mit geringer Deckkraft und kleinem y-Versatz wirken am natürlichsten.

Häufig gestellte Fragen

Was ist der Unterschied zwischen Unschärfe und Ausdehnung?

Unschärfe weicht die Schattenkante auf, ohne die Größe zu ändern; Ausdehnung vergrößert (oder verkleinert bei negativen Werten) den Schatten in alle Richtungen, bevor die Unschärfe angewendet wird.

Wie erzeuge ich einen eleganten, modernen Schatten?

Halten Sie x bei 0, y klein (2-8px), Unschärfe großzügig (10-30px) und Deckkraft niedrig (0,08-0,2). Zwei übereinanderliegende Schatten — einer eng, einer weit — verleihen Tiefe.

Ähnliche Tools

CSS-Farbverlauf-Generator Gestalten Sie lineare, radiale und konische CSS-Farbverläufe mit Live-Vorschau und kopieren Sie den Code. Erstellen CSS Border-Radius-Generator Runden Sie jede Ecke einzeln oder alle zusammen, in px oder %, mit Live-Vorschau und kopierbarem CSS. Erstellen CSS Text-Schatten-Generator Gestalten Sie einen text-shadow mit Versatz, Unschärfe, Farbe und Deckkraft — Live-Vorschau an Beispieltext. Erstellen CSS-Glasmorphismus-Generator Gestalten Sie einen Glaseffekt (Glasmorphismus) mit Live-Vorschau — passen Sie Unschärfe, Transparenz, Farbton und Rahmen an und kopieren Sie das CSS. Erstellen