CSS Schatten Generator

Einstellungen

Vorschau

CSS-Ausgabe

 
  
 
Vollständige Regel
 
 
 
  
 
 
 
So nutzen Sie das Tool
 
     
  1. Versatz einstellen — X/Y-Regler ziehen, um den Schatten zu positionieren.
    2.  
  2. Unschärfe & Spread — Unschärfe für weiche Kanten; Spread vergrößert oder verkleinert den Schatten.
    3.  
  3. Farbe & Deckkraft — Schattenfarbe wählen und Transparenz regeln.
    4.  
  4. Inset umschalten — Für Innenschatten bei Inputs oder gedrückten Buttons.
    5.  
  5. Kopieren & einfügen — "CSS kopieren" und direkt verwenden.
    6.  
 
 
 
Was ist CSS Box-Shadow?
 
box-shadow zeichnet Schatten um die Border-Box — ohne Bilder oder Extra-HTML. Jeder Schatten besteht aus X/Y-Versatz, Unschärfe, Spread und Farbe.
 
Mit inset liegt der Schatten innen. Schatten folgen automatisch dem border-radius. Zwei Ebenen (Key + Ambient) erzeugen realistische Tiefe.
 
 
 
Typische Einsatzszenarien
 
 
Karten-Elevation
 
Modals & Dropdowns
 
Button-Hover-Effekte
 
Inset-Eingabefelder
 
Floating Action Buttons
 
Dark-Theme-Tiefe
 
 
Tipps & Best Practices
 
 
 rgba() nutzen 
Deckkraft unabhängig vom Farbton — einfacher für Light/Dark Themes.
 
 
 Zwei Ebenen stapeln 
Kleiner dunkler Schatten nah am Element + große weiche Ambient-Ebene für realistische Tiefe.
 
 
 Konsistente Lichtrichtung 
Schattenrichtung im ganzen UI gleich halten — meist leicht nach unten rechts.
 
 
 Performance beachten 
Große Blurs nicht auf vielen Elementen gleichzeitig animieren — Scroll auf Mobilgeräten leidet.
 
 
 
Häufig gestellte Fragen
 
 
Unterschied zwischen Unschärfe und Spread?
 
Unschärfe weicht Kanten auf. Spread ändert die Größe vor dem Verwischen — positiv vergrößert, negativ verkleinert.
 
 
 
Wann Inset-Schatten verwenden?
 
Bei gedrückten Buttons, Formularfeldern und eingelassenen Flächen. Standard-Schatten heben Elemente an.
 
 
 
Mehrere Schatten möglich?
 
Ja, kommagetrennt. Dieses Tool erlaubt bis zu drei Ebenen — genug für Key, Ambient und Highlight.
 
 
 
box-shadow oder drop-shadow?
 
box-shadow folgt der Box (Karten, Buttons). filter: drop-shadow() folgt der Alpha-Form (Icons, PNGs).
 
 
 
Funktioniert box-shadow überall?
 
Ja. In allen modernen Browsern ohne Prefixes. Bei großen Blur-Werten auf Zielgeräten testen.