EN
CSS - multiple div shadows
3
points
In this article, we would like to show you how to create multiple shadows for div element using CSS.
Quick solution:
div {
box-shadow:
-30px -30px 5px #6ef5da, /* shadow 1 */
30px -30px 5px #6ef57e, /* shadow 2 */
-30px 30px 5px #796ef5, /* shadow 3 */
30px 30px 5px #b93af8; /* shadow 4 */
}
Where: number of box shadows can be different.
Screenshot:
box-shadow arguments are organized in the following way:
Practical example
In this example, we add four shadows to the square div element.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.shadow {
border: 2px solid black;
width: 50px;
height: 50px;
margin: 50px;
/* multiple shadows - 4 shadows */
box-shadow:
-30px -30px 5px #6ef5da, /* shadow 1 */
30px -30px 5px #6ef57e, /* shadow 2 */
-30px 30px 5px #796ef5, /* shadow 3 */
30px 30px 5px #b93af8; /* shadow 4 */
}
</style>
</head>
<body style="min-height: 150px">
<div class="shadow"></div>
</body>
</html>