Languages
[Edit]
EN

CSS - multiple div shadows

3 points
Created by:
Dragontry
401

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:

Multiple box shadows using CSS.
Multiple box shadows using CSS.

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>

References

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join