Zum Hauptinhalt springen

CSS-Shadow-Generator

Kostenloses Online-Tool zum visuellen Erstellen von CSS box-shadow und text-shadow und zum Kopieren des Codes.

Box Shadow

Schattentyp

Schattenebenen

Ebene 1
10%

CSS-Code

box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);

Vordefinierte Schatten

Hauptfunktionen​

  • 2 Typen: Box Shadow, Text Shadow
  • Echtzeit-Vorschau: Änderungen sofort sehen
  • Mehrere Ebenen: Bis zu 5 Schattenebenen hinzufügen
  • Feinsteuerung: X/Y-Versatz, Unschärfe, Ausbreitung, Farbe, Deckkraft
  • Inset-Unterstützung: Innerer Schatteneffekt
  • Voreinstellungen: 6 Schatten-Voreinstellungen
  • Ein-Klick-Kopieren: CSS-Code sofort kopieren

Schattentypen​

1. Box Shadow​

box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1);

Fügt Schatteneffekte außerhalb oder innerhalb von Elementen hinzu.

Anwendungsfälle:

  • Kartenschatten
  • Button-Tiefe
  • Modal-Hintergründe
  • Bildrahmeneffekte

2. Text Shadow​

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

Fügt Schatteneffekte zu Text hinzu.

Anwendungsfälle:

  • Überschriften
  • Logo-Text
  • Neon-Effekte
  • 3D-Text

Browser-Kompatibilität​

Box Shadow​

  • ✅ Chrome 10+
  • ✅ Firefox 4+
  • ✅ Safari 5.1+
  • ✅ Edge 12+
  • ✅ IE 9+
  • ✅ Alle mobilen Browser

Text Shadow​

  • ✅ Chrome 4+
  • ✅ Firefox 3.5+
  • ✅ Safari 4+
  • ✅ Edge 12+
  • ✅ IE 10+
  • ✅ Alle mobilen Browser

Verwandte Tools​