Box-Shadow-Generator

Nutzen Sie Schieberegler für Ihren Box-Shadow, legen Sie Ebenen für mehr Tiefe übereinander und kopieren Sie das fertige CSS sofort.

Schattenebenen
Ebene 1
CSS
Passen Sie die Schieberegler an, um Ihren Schatten zu gestalten.

Jeder Schatten wird direkt in Ihrem Browser gerendert. Keine Ihrer Einstellungen wird an BroBroGo übertragen.

FAQ

Was genau steuern Versatz, Weichzeichner und Ausdehnung?

Der Versatz (Offset) verschiebt den Schatten nach links/rechts und oben/unten, der Weichzeichner (Blur) macht die Kanten weicher, und die Ausbreitung (Spread) vergrößert oder verkleinert den Schatten vor dem Weichzeichnen. Ein negativer Spread zieht den Schatten nach innen, was für einen engen, nahen Schatten nützlich ist.

Was bewirkt die Inset-Option?

Ein normaler Schatten fällt nach außen, wie Licht hinter einer angehobenen Karte. Inset kehrt den Schatten nach innen um, sodass das Element eingedrückt wirkt – ideal für vertiefte Eingabefelder oder gedrückte Buttons.

Warum sollte man mehrere Schattenebenen übereinanderlegen?

Ein einzelner Schatten wirkt ab einer bestimmten Größe flach. Reale Tiefe entsteht meist durch die Kombination eines scharfen, dunklen Schattens mit einem weichen, breiteren Schatten. Fügen Sie eine zweite Ebene hinzu und passen Sie beide unabhängig voneinander an, um diesen Effekt zu erzielen.

CSS Cubic-Bezier-GeneratorVerschieben Sie die beiden Griffe, um eine Easing-Kurve zu gestalten, vergleichen Sie die Bewegung live und kopieren Sie den cubic-bezier()-Wert.Verlauf-GeneratorErstellen Sie lineare, radiale oder konische Verläufe, fügen Sie Farbstopps hinzu, bestimmen Sie die Richtung und kopieren Sie das CSS mit einem Klick.Border-Radius-GeneratorRunden Sie jede Ecke mit Schiebereglern ab, gestalten Sie organische Blobs im elliptischen Modus und kopieren Sie das CSS sofort.Flexbox-GeneratorRichten Sie einen Flex-Container und seine Elemente mit visuellen Steuerelementen ein, sehen Sie Änderungen sofort live und kopieren Sie das CSS mit einem Klick.CSS-Grid-GeneratorDefinieren Sie Spalten und Zeilen, ziehen Sie Elemente über die Zellen und kopieren Sie das Grid-CSS samt passendem HTML mit einem Klick.CSS-clamp()-RechnerGeben Sie eine Größe für kleine und große Bildschirme ein und erhalten Sie einen flüssigen clamp()-Wert, der dazwischen stufenlos skaliert – für Schriftgrößen, Padding, Margins oder Gaps.FarbkonverterKonvertieren Sie Farben zwischen HEX, RGB, HSL, HSV, CMYK und LAB – bearbeiten Sie ein Feld und die restlichen Werte passen sich sofort an.CSS-Formatierer & -MinimiererRücken Sie unordentliches CSS ein, um es lesbar zu machen, oder minimieren Sie es für die Veröffentlichung – mit einem sicheren Modus, der die Reihenfolge Ihrer Regeln niemals ändert.Kontrast-RechnerGeben Sie eine Text- und Hintergrundfarbe ein, um das WCAG-Kontrastverhältnis und die bestandenen AA- und AAA-Stufen zu ermitteln.