CSS-Schatten-Generator
CSS-Schatten generieren
Wie man CSS-Schatten-Generator benutzt
CSS-Schatten generieren Kostenloses Online-Tool, ohne Anmeldung, ohne aufdringliche Werbung. Jetzt nutzen.
Wofür werden CSS-Schatten verwendet?
Schatten verleihen Interfaces Tiefe, Elevation und visuelle Hierarchie. Googles Material Design, Apples Human Interface Guidelines und die meisten modernen Design-Systeme verwenden Schatten systematisch, um zu vermitteln, welche Elemente dem Nutzer näher sind — eine dreidimensionale Tiefe in flachen Interfaces zu erzeugen.
- Card-Elevation: Ein subtiler Schatten auf einer Card-Komponente hebt sie vom Hintergrund ab und signalisiert, dass es sich um eine interaktive oder eigenständige Inhaltseinheit handelt. Tiefere Schatten zeigen höhere Elevation — wie die Floating-Action-Buttons (FAB) in Googles Material Design.
- Modal- und Dropdown-Schatten: Overlays (Modals, Dropdown-Menüs, Tooltips) verwenden starke Schatten, um anzuzeigen, dass sie über dem Seiteninhalt schweben — klare visuelle Tiefenhierarchie erzeugend.
- Fokus-Indikatoren: Box-Shadows können Outlines für Fokus-Zustände ersetzen:
box-shadow: 0 0 0 3px rgba(123,53,245,0.4)erzeugt einen sichtbaren Fokus-Ring ohne das Layout zu beeinflussen — gemäß BITV-2.0-Anforderungen für barrierefreie Fokusindikatoren. - Text-Lesbarkeit: Ein subtiler Text-Shadow auf weißem Text über einem Bild gewährleistet die Lesbarkeit unabhängig vom Bildinhalt dahinter — ohne einen soliden Farbüberzug zu benötigen.
- Neumorphismus: Der neumorphistische Design-Stil verwendet doppelte Schatten — einen hellen auf einer Seite und einen dunklen auf der anderen — um einen 3D extrudierten oder eingelassenen Effekt zu erzeugen, der in den Hintergrund modelliert wirkt.
Box-Shadow-Syntax: box-shadow: [inset] offset-x offset-y blur-radius spread-radius farbe. Mehrere Schatten können gestapelt werden: box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.05) — eine in Googles Material Design verwendete Technik für natürlich wirkende mehrschichtige Schatten.
Frequently Asked Questions
Was ist der Unterschied zwischen box-shadow und drop-shadow()?
box-shadow wird auf die rechteckige Box des Elements angewendet — er folgt nicht unregelmäßigen Formen wie PNG-Bildern mit transparentem Hintergrund. Die CSS-Filterfunktion drop-shadow() folgt der tatsächlich gerenderten Form, einschließlich transparenter Bereiche. Verwenden Sie drop-shadow() für Icons und Bilder mit Transparenz; box-shadow für rechteckige Elemente wie Cards und Buttons.
Was bewirkt das Schlüsselwort 'inset'?
Das inset-Schlüsselwort lässt den Schatten innerhalb des Elements erscheinen statt außerhalb. Ein Inset-Schatten erzeugt das Aussehen eines eingekerbten oder gedrückten Elements — nützlich für gedrückte Button-Zustände, Eingabefelder (innerer Tiefeneffekt) oder neumorphistische eingelegte UI-Elemente.
Was ist der Spread-Radius in box-shadow?
Der vierte Wert in box-shadow ist der Ausbreitungsradius — er vergrößert oder verkleinert den Schatten. Ein positiver Wert macht den Schatten größer als das Element; ein negativer macht ihn kleiner. offset-x und offset-y auf 0 mit positiver Ausbreitung erzeugt einen gleichmäßigen Umriss-/Leuchteffekt um das Element.
Warum sieht mein Schatten in Safari anders aus als in Chrome?
Rendering-Unterschiede zwischen Browsern entstehen normalerweise durch Sub-Pixel-Rendering und Gamma-Korrektur. Safari und Chrome verwenden leicht unterschiedliche Kompositions-Algorithmen. Für konsistente Ergebnisse verwenden Sie RGBA-Farben mit expliziten Alphawerten statt opacity und testen Schatten in beiden Rendering-Engines während der Entwicklung.
Wie viele Box-Shadows können gestapelt werden?
Es gibt keine strikte Begrenzung — Sie können mehrere Box-Shadows mit einer kommaseparierten Liste stapeln. Mehrere gestapelte Schatten mit unterschiedlichen Unschärferadien und Opazitäten erzeugen natürlicher wirkende Schatten, die die Beleuchtung aus der realen Welt imitieren. Googles Material Design definiert spezifische mehrschichtige Schattenrezepte für jedes Elevationsniveau.
CSS box-shadow vs. outline vs. border vs. filter: drop-shadow()
box-shadow fügt einen Schatten außerhalb (oder innen mit inset) der Box hinzu — beeinflusst das Layout nicht. outline zeichnet eine Linie außerhalb des Randes — beeinflusst das Layout ebenfalls nicht, häufig für zugängliche Fokus-Indikatoren verwendet. border fügt eine Linie innerhalb des Elements hinzu — beeinflusst das Layout. filter: drop-shadow() folgt der tatsächlich gerenderten Form des Elements, einschließlich Transparenzen. Für UI-Elevation und Tiefe: box-shadow. Für Fokus-Ringe: outline oder box-shadow. Für Icon-Schatten: drop-shadow().