a11y.skipToMainContent
1

Box Shadow Generator

Erstellen Sie CSS-Box-Schatten visuell - stimmen Sie Offset, Unschärfe, Spread, Farbe, Opazität und Inset mit Live-Vorschau ab.

px
px
px
px
%

Preview

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use Box Shadow Generator

  1. Passen Sie die Schieber für X / Y Offset, Unschärfe, Spread, Farbe, Opazität.
  2. Toggle Inset für innere Schatten.
  3. Kopieren Sie das CSS.

Was ist Box-Schatten-Generator?

Slider für jede Eigenschaft der Box-Shadow-CSS-Spezifikation. Eine Vorschaukarte zeigt genau, wie Ihr Schatten aussehen wird. Kopieren Sie das One-Line-CSS, wenn Sie fertig sind.

Advertisement

FAQ

Was ist Spread Radius?
Positive Ausbreitung wächst die Größe des Schattens vor dem Verwischen; Negativ schrumpft es. Kombinieren Sie negative Ausbreitung mit Offset für saubere gerichtete Schatten.
Kann ich mehrere Box Shadows gleichzeitig hinzufügen?
Ja. Fügen Sie so viele Schattenschichten hinzu, wie Sie möchten; Sie werden zu einer einzigen Komma-getrennten Box-Shadow-CSS-Eigenschaft kombiniert, die Sie kopieren können.
Was macht die Checkbox?
Inset zieht den Schatten innerhalb des Elements statt außerhalb und erzeugt einen gedrückten oder versunkenen visuellen Effekt auf Ihre Komponente.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 Box Shadow Generator on Wikipedia·Developer Tools on Wikipedia·Box Shadow Generator on Britannica

People also use

← Back to Developer Tools · All tags
Advertisement