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

px
px
px
px
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.

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

Button Text
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

  • chrome iconChrome4*
  • opera iconOpera10.5
  • firefox iconFirefox4.0
  • safari iconSafari5.1
  • internet_explorer iconInternet Explorer9
  • edge iconEdge12

Mobile / Tablet

  • ios_safari iconIos Safari4.4*
  • opera_mobile iconOpera Mobile12*
  • opera_mini iconOpera Mini-
  • android iconAndroid4*
  • android_chrome iconAndroid Chrome71
  • android_firefox iconAndroid Firefox64

oliver

Hinterlasse doch 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.

Hinterlasse ein Kommentar zum Beitrag "Box Shadow Generator"

Deine E-Mail-Adresse wird nicht veröffentlicht.

Letzte Aktualisierung am 23.09.2019 / Affiliate Links / Bilder von der Amazon Product Advertising API