Box Shadow Generator
Mit den kostenlosen Box Shadow Generator Tool lassen sich ganz einfach Schatten für jegliche Elemente der Webseite erstellen. Während man früher für die Erstellung des Schatten-Effekts ladeunfreunliche Bilder erstellen musste genügt es heute mit dem CSS-Befehl box-shadow: einfach und schnell einen Box-Shadow zu erstellen – und dank des einfachen Box-Shadow Generator auf meiner Seite gelingt dies jedem, auch ohne fundiertes Hintergrundwissen.
kostenloser Box-Shadow Generator
copy to clipboard
Wie funktioniert der Free Box Shadow Generator?
Der Box-Shadow Generator funktioniert sehr einfach und besteht aus folgenden Angaben:
Allgemeine Angaben:
- inset: Standardmäßig wird der Schatten außerhalb einer Box gesetzt. Man kann diesen aber mit dem Wert inset auch innerhalb eines Elements setzen.
- Horizontal: Hier sind Werte in positiven, wie auch im negativen Bereich erlaubt. Gibt den Abstand vom Mittelpunkt an, wie sich der Schatten auf der horizontalen Ebene bewegen soll.
- Vertical: Hier sind Werte in positiven, wie auch im negativen Bereich erlaubt. Gibt den Abstand vom Mittelpunkt an, wie sich der Schatten auf der vertikalen Ebene bewegen soll.
- Blur Radius: Beim Blur Radius wird definiert wie unscharf der Schatten sein soll.
- Spread: Spread gibt die Verbreitung des Schatten ans – ähnlich der einer Border-Stärke.
Keine Produkte gefunden.
Box Shadow Farbe
- hex: Angabe des Schatten in Hexadezimal
- rgba: Hier kann der Wert als rgba mit Transparenz im Bereich von 0 (100% Transparent) bis 1 (0% Transparent) angegeben werden.
Box Shadow Beispiele
A
B
C
D
E
F
G
H
div.box-shadow-a {
box-shadow: 5px 5px 5px #457300;
-moz-box-shadow: 5px 5px 0 #457300;
-webkit-box-shadow: 5px 5px 0 #457300;
}
div.box-shadow-b {
box-shadow: -5px -5px 0 0 #457300;
-moz-box-shadow: -5px -5px 0 0 #457300;
-webkit-box-shadow: -5px -5px 0 0 #457300;
}
div.box-shadow-c {
box-shadow: 0 0 5px 5px #457300;
-moz-box-shadow: 0 0 5px 5px #457300;
-webkit-box-shadow: 0 0 5px 5px #457300;
}
div.box-shadow-d {
box-shadow: -5px -5px 5px 0 #457300;
-moz-box-shadow: -5px -5px 5px 0 #457300;
-webkit-box-shadow: -5px -5px 5px 0 #457300;
}
div.box-shadow-e {
box-shadow: -5px -5px 5px 5px #457300;
-moz-box-shadow: -5px -5px 5px 5px #457300;
-webkit-box-shadow: -5px -5px 5px 5px #457300;
}
div.box-shadow-f {
box-shadow: 0 0 5px 0 #457300;
-moz-box-shadow: 0 0 5px 0 #457300;
-webkit-box-shadow: 0 0 5px 0 #457300;
}
div.box-shadow-g {
box-shadow: 0 0 0px 5px #457300;
-moz-box-shadow: 0 0 0px 5px #457300;
-webkit-box-shadow: 0 0 0px 5px #457300;
}
div.box-shadow-h {
box-shadow: 5px 5px rgba(69,115,0,0.5);
-moz-box-shadow: 5px 5px rgba(69,115,0,0.5);
-webkit-box-shadow: 5px 5px rgba(69,115,0,0.5);
}Box Shadow inset
A
B
C
D
E
F
G
H
div.box-shadow-i {
box-shadow: inset 5px 5px 5px #457300;
-moz-box-shadow: inset 5px 5px 0 #457300;
-webkit-box-shadow: inset 5px 5px 0 #457300;
}
div.box-shadow-j {
box-shadow: inset -5px -5px 0 0 #457300;
-moz-box-shadow: inset -5px -5px 0 0 #457300;
-webkit-box-shadow: inset -5px -5px 0 0 #457300;
}
div.box-shadow-k {
box-shadow: inset 0 0 5px 5px #457300;
-moz-box-shadow: inset 0 0 5px 5px #457300;
-webkit-box-shadow: inset 0 0 5px 5px #457300;
}
div.box-shadow-l {
box-shadow: inset -5px -5px 5px 0 #457300;
-moz-box-shadow: inset -5px -5px 5px 0 #457300;
-webkit-box-shadow: inset -5px -5px 5px 0 #457300;
}
div.box-shadow-m {
box-shadow: inset -5px -5px 5px 5px #457300;
-moz-box-shadow: inset -5px -5px 5px 5px #457300;
-webkit-box-shadow: inset -5px -5px 5px 5px #457300;
}
div.box-shadow-n {
box-shadow: inset 0 0 5px 0 #457300;
-moz-box-shadow: inset 0 0 5px 0 #457300;
-webkit-box-shadow: inset 0 0 5px 0 #457300;
}
div.box-shadow-o {
box-shadow: inset 0 0 0px 5px #457300;
-moz-box-shadow: inset 0 0 0px 5px #457300;
-webkit-box-shadow: inset 0 0 0px 5px #457300;
}
div.box-shadow-p {
box-shadow: inset 5px 5px rgba(69,115,0,0.5);
-moz-box-shadow: inset 5px 5px rgba(69,115,0,0.5);
-webkit-box-shadow: inset 5px 5px rgba(69,115,0,0.5);
}Mehrere Schatten übereinander legen
Q
div.box-shadow-q {
box-shadow: 0 0 10px 5px black, 40px -30px orange, 40px 30px 50px blue, -40px 30px green, -40px -30px 50px yellow;
-moz-box-shadow: 0 0 10px 5px black, 40px -30px orange, 40px 30px 50px blue, -40px 30px green, -40px -30px 50px yellow;
-webkit-box-shadow: 0 0 10px 5px black, 40px -30px orange, 40px 30px 50px blue, -40px 30px green, -40px -30px 50px yellow;
} Button 3D-Effekt mit Box Shadow
div.box-shadow-button {
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 0 0 1px rgba(255, 255, 255, 0.2) inset, 5px 5px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 0 0 1px rgba(255, 255, 255, 0.2) inset, 5px 5px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 0 0 1px rgba(255, 255, 255, 0.2) inset, 5px 5px 10px rgba(0, 0, 0, 0.5);
border: 1px solid #5e9d00;
text-shadow: 0 -1px 0 #5e9d00;
}Browser Support
Desktop
Chrome4*
Opera10.5
Firefox4.0
Safari5.1
Internet Explorer9
Edge12
Mobile / Tablet
Ios Safari4.4*
Opera Mobile12*
Opera Mini-
Android4*
Android Chrome71
Android Firefox64
Hinterlasse doch ein Kommentar
Schreibe ein Kommentar zu Box Shadow Generator
Wenn dir der Beitrag Box Shadow Generator gefallen hat oder du Kritik bzw. Verbesserungsvorschläge hast, dann würde ich mich freuen, wenn Du ein Kommentar hinterlassen würdest.