CSS-box-shadow-Generator
Erstelle CSS-Schatten (box-shadow) mit Live-Vorschau: Versatz, Unschärfe, Ausbreitung, Farbe, Deckkraft, mehrere Schichten und fertige Vorlagen.
So geht’sCSS-Schatten-Generator
Verfügbar auf: 
CSS-box-shadow-Generator: wofür es gut ist
Passe Versatz, Unschärfe, Ausbreitung, Farbe und Deckkraft des Schattens an und sieh das Ergebnis sofort. Kombiniere mehrere Schichten für realistische Schatten und nutze die Option innen (inset).
Es gibt fertige Vorlagen wie sanft in Schichten, Material, schwebend, Kontur, Neumorphismus und Neon. Der CSS-Code ist fertig zum Kopieren, schon mit dem border-radius.
So geht’s
- Wähle eine Vorlage oder beginne bei null.
- Passe die Schichten und Farben an.
- Kopiere das CSS.
Wann nutzen
- Karten und Buttons Tiefe geben.
- Neumorphismus- und Neon-Effekte erstellen.
- Lernen, wie box-shadow funktioniert.
Häufige Fragen
Wie mache ich einen sanften, realistischen Schatten?
Nutze mehrere Schichten mit wenig Deckkraft: eine kurze, scharfe und eine lange, unscharfe. Die Vorlage „Sanft in Schichten“ macht das schon.
Was ist ein innerer Schatten (inset)?
Es ist der Schatten, der innerhalb des Elements gezeichnet wird und den Eindruck erweckt, es sei versunken. Markiere die Option „Innen“ in der Schicht.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.