box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.2);
Perfekte Schatten für deine Elemente
Box-Shadows verleihen Elementen Tiefe und Dimension. Mit diesem visuellen Generator passt du alle Parameter an – Offset, Blur, Spread, Farbe und Inset – und siehst das Ergebnis in Echtzeit.
Box-Shadow Parameter erklärt
Ein Box-Shadow hat bis zu 6 Parameter: horizontaler Offset, vertikaler Offset, Blur-Radius, Spread-Radius, Farbe und optional "inset" für innere Schatten.
Schatten im modernen Webdesign
Subtile Schatten (Soft Shadows) sind ein Kennzeichen modernen Designs. Sie heben Elemente hervor, ohne aufdringlich zu wirken. Weniger ist oft mehr.
Performance-Hinweis
Box-Shadows können bei vielen Elementen die Performance beeinträchtigen. Verwende will-change: transform auf animierten Elementen und vermeide extrem große Blur-Werte.
Fragen & Antworten Häufig gestellte Fragen.
Was bedeuten die Box-Shadow Werte?
box-shadow: X Y blur spread farbe; X = horizontaler Versatz, Y = vertikaler Versatz, blur = Unschärfe, spread = Größe, z.B.: box-shadow: 5px 10px 15px rgba(0,0,0,0.2);
Wie erstelle ich einen inneren Schatten?
Mit dem Keyword "inset" am Anfang: box-shadow: inset 0 2px 5px rgba(0,0,0,0.2); Das erzeugt einen Schatten innerhalb des Elements.
Kann ich mehrere Schatten kombinieren?
Ja, durch Komma getrennt: box-shadow: 0 5px 15px rgba(0,0,0,0.1), 0 2px 5px rgba(0,0,0,0.1); Das erzeugt mehrschichtige, realistischere Schatten.
Was ist der Unterschied zwischen blur und spread?
Blur macht den Schatten weicher/unschärfer. Spread vergrößert oder verkleinert den Schatten. Ein negativer Spread macht ihn kleiner als das Element.
Ähnliche Tools
- CSS Border Radius GeneratorAlle 4 Ecken einzeln anpassen. Runde Buttons, Kreise und organische Formen erstellen. ✓ Live-Vorschau ✓ CSS kopieren ✓ Ohne Anmeldung.
- CSS Gradient GeneratorCSS-Farbverläufe per Drag & Drop: Linear, radial, beliebig viele Farben. CSS-Code sofort kopieren. ✓ Kostenlos ✓ Live-Vorschau.
- CSS MinifierCSS-Code minifizieren: Whitespace, Kommentare und überflüssige Zeichen entfernen. Größenersparnis sofort sehen. ✓ Kostenlos ✓ Ohne Upload.
Vom Werkzeug zum Projekt Lieber machen lassen?
Du willst ein professionelles Webdesign mit Liebe zum Detail? Ich gestalte Websites die modern aussehen und perfekt funktionieren. Webdesign ansehen
Ohne Risiko anfragen
- Unverbindlich. Erstgespräch und Angebot kosten nichts.
- Persönlich. Sie sprechen direkt mit mir, nicht mit einem Vertrieb.
- Klar. Schriftliches Angebot mit Preis und Ablauf, bevor etwas startet.
Ihr Richtwert
ab 1.500 €
Wählen Sie unten, was Sie brauchen — der Richtwert passt sich sofort an.
