So verwenden Sie Box-Shadow-Generator
- 1
Ausgangsschatten wählen
Klicken Sie auf eine Vorlage wie Weich, Mehrschichtig oder Erhöhung 2, oder passen Sie die Standardebene an.
- 2
Jede Ebene gestalten
Wählen Sie eine Ebene aus und legen Sie X- und Y-Versatz, Unschärfe, Ausbreitung, Farbe, Deckkraft und Innen fest.
- 3
Auf Ihrer Fläche prüfen
Ändern Sie Boxgröße, Eckenradius und Farben passend zum Element, das Sie gestalten.
- 4
CSS kopieren
Kopieren Sie die box-shadow-Deklaration oder die Tailwind-Klasse in Ihren Code.
Limits und Pro
Kostenlos und ohne Registrierung: unbegrenzt viele Ebenen, Versatz von −100 bis 100 px, Unschärfe bis 200 px und 12 Schattenvorlagen.
Pro entfernt die Werbung; der Schatten-Editor ist in jedem Tarif vollständig. Pro ansehen
Über Box-Shadow-Generator
Die CSS-Eigenschaft box-shadow nimmt eine Liste von Ebenen entgegen, jeweils mit horizontalem und vertikalem Versatz, Unschärferadius, Ausbreitung, Farbe und optional dem Schlüsselwort inset. Natürlich wirkende Tiefe entsteht, wenn all diese Werte über zwei oder mehr Ebenen hinweg ausbalanciert sind – das ist schwierig, wenn man Zahlen direkt im Stylesheet bearbeitet. Dieser Editor zeigt das Ergebnis in einer Live-Vorschau, während Sie die Regler ziehen, und schreibt die Deklaration sowie eine Tailwind-Klasse im Format shadow-[…] für Sie.
Fügen Sie beliebig viele Ebenen hinzu, blenden Sie eine vorübergehend aus, um zu vergleichen, verschieben Sie sie nach oben oder unten – die erste Ebene in der Liste wird zuoberst gezeichnet – oder stellen Sie sie auf „Innen“ um, etwa für gedrückte Buttons und Eingabefelder. Der Versatz reicht von −100 bis 100 Pixel, die Unschärfe bis 200 Pixel und die Ausbreitung von −100 bis 100; jede Farbe hat ihre eigene Deckkraft. Eine negative Ausbreitung ist der Trick hinter modernen weichen Schatten: Sie zieht den Schatten unter das Element, sodass darunter nur ein dezentes Leuchten sichtbar bleibt.
Die Vorschau-Box lässt sich in der Größe ändern und mit beliebigem Eckenradius, beliebiger Boxfarbe und beliebiger Hintergrundfarbe versehen. So beurteilen Sie den Schatten auf der tatsächlichen Fläche Ihres Designs, auch in dunklen Themes, wo Schatten mehr Deckkraft oder ein farbiges Leuchten brauchen.
Zwölf Ausgangspunkte sind enthalten: vier Material-Design-Erhöhungsstufen, eine weiche einzelne Ebene, ein fünfschichtiger glatter Schatten, ein harter neubrutalistischer Versatz, Neumorphismus, ein Innenschatten, ein farbiges Leuchten, ein Konturring im Fokus-Stil und eine schwebende Karte. Verläufe finden Sie im anderen Tab; Textschatten und der Filter drop-shadow() werden nicht abgedeckt.
Datenschutz
Der Schatten wird vollständig auf dieser Seite erstellt und angezeigt, und Ihre Ebenen werden nur im lokalen Speicher dieses Browsers abgelegt, damit sie ein Neuladen überstehen. Einstellungen oder Entwürfe werden nicht an einen Server gesendet.