Box shadow
Box shadow
box-shadow: (horizontal)px (vertical)px (blur)px color inset;
Horizontal shadow
Vertical shadow
Bottom right shadow
Bottom left shadow
top left shadow
top right shadow
Colorful shadow
Blur shadow
Multiple shadow
Opposite shadow
Inset shadow
Neumorphism shadow
body {
margin: 0;
padding: 0;
}
h2 {
text-align: center;
}
.container {
display: flex;
flex-wrap: wrap;
margin: 50px;
}
.container div {
width: 200px;
}
.container div div {
width: 120px;
height: 150px;
margin: 10px;
background-color: steelblue;
}
.horizontal {
box-shadow: 10px 0;
}
.vertical {
box-shadow: 0 10px;
}
.bottom-right {
box-shadow: 8px 8px;
}
.bottom-left {
box-shadow: -8px 8px;
}
.top-left {
box-shadow: -8px -12px;
}
.top-right {
box-shadow: 12px -12px;
}
.colorful {
box-shadow: 10px 10px rebeccapurple;
}
.blur {
box-shadow: 10px 10px 10px rebeccapurple;
}
.multiple {
box-shadow: 5px 5px 5px red, 15px 15px 5px greenyellow, 25px 25px 5px rosybrown;
}
.opposite {
box-shadow: 10px 10px 5px rebeccapurple, -10px -10px 5px rebeccapurple;
}
.inset {
box-shadow: 20px 20px 5px rgb(50, 94, 129) inset;
}
.neumorphism {
box-shadow: 15px 15px 5px rgb(50, 94, 129) inset, -15px -15px 5px rgb(50, 94, 129) inset;
}