CSS
HTML
COMPONENTS
CODE HUB
CSS Box Shadow Generator
Konfiguration
Eingesetzt
Farbe
Horizontaler Versatz
Vertikaler Versatz
Blur
Spread
Klasse
Vorschau
Code
Coden lernen mit Lara
Meistere Programmierkonzepte Schritt für Schritt mit deinem interaktiven KI-Tutor. Lara erklärt komplexe Logik, überprüft deine Praxisübungen und hilft dir, ein solides Fundament in der Softwareentwicklung aufzubauen.
Interaktive Programmierlektionen, angepasst an dein eigenes Tempo.
Jetzt lernen mit Lara startenCSS Box Shadow Generator
In CSS wird die box-shadow-Eigenschaft verwendet, um Schatteneffekte für HTML-Elemente zu erstellen. Diese Eigenschaft ermöglicht es Ihnen, einem Element einen Schatten hinzuzufügen, wodurch Tiefe und Trennung vom Hintergrund entstehen. Die box-shadow-Eigenschaft kann eine Vielzahl von Schatteneffekten erzeugen, indem Parameter wie die Position, Größe, Farbe und der Unschärferadius des Schattens angegeben werden.
Hier ist die grundlegende Syntax für die box-shadow-Eigenschaft:
box-shadow: h-shadow v-shadow blur spread color;
- h-shadow: Dieser Parameter gibt die horizontale Position des Schattens an. Ein positiver Wert verschiebt den Schatten nach rechts, ein negativer Wert nach links.
- v-shadow: Dieser Parameter gibt die vertikale Position des Schattens an. Ein positiver Wert verschiebt den Schatten nach unten, ein negativer Wert nach oben.
- blur: Dieser Parameter definiert den Unschärferadius des Schattens und erzeugt einen mehr oder weniger diffusen Schatteneffekt. Verwenden Sie einen Wert von 0 für einen scharfen Schatten.
- spread: Dieser Parameter steuert die Größe des Schattens und erweitert oder verkleinert ihn. Ein positiver Wert erweitert den Schatten, ein negativer Wert verkleinert ihn.
- color: Dieser Parameter gibt die Farbe des Schattens an.
Hier ist ein Beispiel, wie Sie die box-shadow-Eigenschaft verwenden können, um einen einfachen Schatteneffekt für eine Box zu erstellen:
.shadow-element {
box-shadow: 10px 10px 5px 0px #888888;
}
In diesem Beispiel:
- Die Klasse .shadow-element wendet einen Box-Schatten an.
- 10px gibt einen 10-Pixel horizontalen Schatten an.
- 10px gibt einen 10-Pixel vertikalen Schatten an.
- 10px setzt den Unschärferadius auf 5 Pixel und erzeugt eine leichte Unschärfe.
- 10px ist der Ausbreitungswert (keine Ausbreitung).
- #888888 definiert die Schattenfarbe als Grau.
Sie können die box-shadow-Eigenschaft anpassen, um eine Vielzahl von Schatteneffekten zu erstellen, einschließlich eingesetzter Schatten, mehrerer Schatten und komplexerer visueller Effekte. Es ist eine vielseitige Eigenschaft, um Tiefe und Dimension zu Elementen auf Ihrer Webseite hinzuzufügen.