ZenovayTools

CSS Box Shadow Generator

Entwerfen Sie CSS box-shadow-Effekte visuell mit mehreren Ebenen, Inset-Unterstützung, Opazitätskontrolle und sofort kopierbare CSS-Ausgabe.

Live preview

Preview background

Box color

Presets

Shadow Layers

px
px
px
px
%

CSS Output

box-shadow: 0px 4px 16px -2px rgba(0, 0, 0, 0.15);

So verwenden Sie CSS Box Shadow Generator

  1. 1Passen Sie Schattenversatz, Unschärfe, Ausbreitung und Farbe mit Schiebereglern an.
  2. 2Fügen Sie mehrere Schattenschichten für komplexe Effekte hinzu.
  3. 3Probieren Sie Voreinstellungen wie neumorphisch, schwebende Karte oder Glanz.
  4. 4Kopieren Sie den generierten CSS-Code für Ihr Projekt.
ZenovayAnalytics

Wissen Sie, was Ihre Besucher wirklich tun.

  • Besucher-Tracking in Echtzeit
  • Datenschutz zuerst, kein Cookie-Banner
  • In zwei Minuten eingerichtet
Zenovay entdecken

Verwandte Tools

CSS Gradient Generator
Erstellen Sie schöne CSS-Gradienten mit einem visuellen Editor. Lineare, radiale und konische Gradienten.
CSS Box Shadow Generator
Entwerfen Sie CSS Box Shadows mit visuellen Steuerelementen. Passen Sie Offset, Unschärfe, Ausbreitung und Farbe an.
CSS Border Radius Generator
Erstellen Sie benutzerdefinierte Border-Radius-Werte mit visuellen Steuerelementen. Verknüpfen oder trennen Sie Ecken für schnelle Anpassungen.
CSS Flexbox Playground
Erlernen und generieren Sie CSS Flexbox Layouts visuell. Passen Sie Richtung, Ausrichtung, Umbruch und Lücke in Echtzeit an.

Häufig gestellte Fragen

Was ist die CSS box-shadow-Syntax?▾
box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color. Beispiel: box-shadow: 2px 4px 8px 0px rgba(0,0,0,0.2).
Was ist der Unterschied zwischen box-shadow und drop-shadow?▾
box-shadow erstellt einen rechteckigen Schatten hinter dem Box-Modell. filter: drop-shadow() folgt der sichtbaren Form des Elements, einschließlich transparenter Bereiche.
Wie erstelle ich einen realistischen Schatten?▾
Verwenden Sie niedrige Opazität (10-30%), leichten Abwärtsversatz, moderate Unschärfe, null oder negativen Spread. Fügen Sie eine zweite Umgebungsschattenschicht für Realismus hinzu.
Wofür werden eingefügte Schatten verwendet?▾
Eingefügte Schatten erscheinen im Element und erzeugen gepresste/vertiefte Effekte. Wird für Schaltflächen, Eingabefelder, neumorphisches Design und Fortschrittsbalken verwendet.
Wie funktionieren mehrere Box-Schatten?▾
Mehrere Werte sind durch Kommas getrennt und rendern in Reihenfolge (erste oben). Dies ermöglicht geschichtete Tiefe, Glanz- + Schlagschatten-Kombinationen und neumorphische Effekte.