[Edit]

CSS - multiple div shadows

1 contributors

2 contributions

0 discussions

3 points

Created by:

Dragontry

731

In this article, we would like to show you how to create multiple shadows for div element using CSS.

Quick solution:

xxxxxxxxxx
 
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

Edit

In this example, we add four shadows to the square div element.

xxxxxxxxxx
 
<!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>