CSS-Schatten-Generator

CSS-Schattenwerte verstehen

box-shadow besteht aus horizontalem und vertikalem Versatz, Unschärfe, Ausdehnung, Farbe und optional inset. text-shadow nutzt Versatz, Unschärfe und Farbe. Die Regler aktualisieren die vollständige Deklaration sofort und zeigen die Wirkung jedes Wertes.

Tiefe mit mehreren Ebenen erzeugen

Mehrere dezente Schatten wirken meist natürlicher als ein einzelner starker Schatten. Kombinieren Sie eine enge dunkle Kontaktschicht mit einer weicheren, breiteren Ebene für Höhe oder stapeln Sie farbige Ebenen für einen Leuchteffekt.

Von der Vorschau zum produktiven CSS

Wählen Sie box-shadow oder text-shadow, beginnen Sie mit einer Vorlage und justieren Sie Position, Unschärfe, Ausdehnung, Deckkraft, Radius und Farben. Kopieren Sie das CSS und testen Sie es anschließend auf dem echten Hintergrund und in responsiven Zuständen.

Weiterlernen und gestalten