TOOLADEX
light
← Back to Blog

CSS Box Shadow Generator: Erstellen Sie Box-Schatten visuell

By Tooladex Team •
CSSBox-ShadowDesign-ToolsWebdesign
CSS Box Shadow Generator: Erstellen Sie Box-Schatten visuell

Brauchen Sie mehr Tiefe oder Erhebung für eine Karte, Schaltfläche oder ein Panel? Der CSS Box Shadow Generator ermöglicht es Ihnen, box-shadow Werte visuell zu erstellen: setzen Sie Offset, Unschärfe, Streuung, Farbe und optional Inset, fügen Sie mehrere Schatten hinzu und kopieren Sie das CSS mit einem Klick.

Beispiel: Wählen Sie das "Soft"-Preset für einen subtilen Schlagschatten oder "Layered" für eine realistischere Tiefe. Passen Sie Offset und Unschärfe mit den Reglern an, wählen Sie eine Farbe (einschließlich Transparenz) und verwenden Sie "Inset" für einen gedrückten oder vertieften Look. Die Vorschau aktualisiert sich, während Sie die Werte ändern. Kopieren Sie das CSS und fügen Sie es in Ihr Stylesheet ein.

Was ist box-shadow?

box-shadow ist eine CSS-Eigenschaft, die einen oder mehrere Schatten hinter (oder innerhalb) eines Elements zeichnet. Sie steuern den horizontalen und vertikalen Offset, den Unschärferadius, die Streuung, die Farbe und ob der Schatten inset ist. Box-Schatten fügen Tiefe und Trennung hinzu, ohne zusätzliches Markup oder Bilder, und sie funktionieren in allen modernen Browsern.

Warum einen Box Shadow Generator verwenden?

Schnellere Iteration — Passen Sie Offset, Unschärfe und Farbe mit Steuerelementen an, anstatt rohes CSS von Hand zu bearbeiten.

Visuelles Feedback — Sehen Sie den Schatten auf einer Vorschau-Box, damit Sie den gewünschten Look erhalten, bevor Sie den Code kopieren.

Mehrere Schatten — Stapeln Sie mehrere Schatten (z. B. einen sanften Umgebungs Schatten plus einen schärferen) und kopieren Sie eine einzelne box-shadow Deklaration.

Presets — Beginnen Sie mit Soft, Medium, Hard, Inset oder Layered und passen Sie von dort aus an.

Keine Anmeldung — Kostenlos, clientseitig und funktioniert offline, sobald die Seite geladen ist.

So funktioniert das Tool

  1. Verwenden Sie die Vorschau, um den aktuellen Schatten zu sehen (und optional den Hintergrund der Vorschau zu ändern).
  2. Bearbeiten Sie jeden Schatten: Offset X/Y, Unschärfe, Streuung, Farbe (Picker oder hex/rgba) und Inset.
  3. Fügen Sie Schatten hinzu oder entfernen Sie sie, um geschichtete Effekte zu erstellen.
  4. Kopieren Sie das CSS aus der Ausgabe und fügen Sie es in Ihr Projekt ein.
  5. Probieren Sie Presets (Soft, Medium, Hard, Inset, Layered), um einen Stil zu starten.

Syntax: box-shadow: offset-x offset-y blur-radius spread-radius color [inset]; Mehrere Schatten sind durch Kommas getrennt.

Anwendungsfälle

Karten und Panels — Sanfte Schatten, um Inhalte von der Seite abzuheben.

Schaltflächen — Subtile Tiefe standardmäßig oder inset für einen gedrückten Zustand.

Modals und Dropdowns — Geschichtete Schatten für Erhebung und Trennung vom Hintergrund.

Bilder — Ein leichter Schatten, um Bilder einzurahmen oder zu schwebend.

Häufig gestellte Fragen

Was ist inset?
Ein inset Box-Schatten wird innerhalb des Randbereichs des Elements gezeichnet, wie ein vertiefter oder gedrückter Effekt. Verwenden Sie es für Eingaben, gedrückte Schaltflächen oder vertiefte Panels.

Kann ich mehrere Schatten verwenden?
Ja. Fügen Sie weitere Schatten mit "Schatten hinzufügen" hinzu. Sie stapeln sich in der Reihenfolge; der erste ist oben. Kombinieren Sie mehrere Schatten für geschichtete Tiefe oder mischen Sie inset und outset.

Probieren Sie den CSS Box Shadow Generator aus

CSS Box Shadow Generator

Generate CSS box-shadow values visually. Set offset, blur, spread, color, and inset. Add multiple shadows and copy the CSS instantly.

Try Tool Now

The CSS Box Shadow Generator is free, works in your browser, and requires no sign-up. Adjust offset, blur, spread, color, and inset, add multiple shadows if you like, and copy the CSS with one click — perfect for cards, buttons, and UI depth.

Related Tools