Last Updated: September 30, 2021
·
1.16K
· brandonbeeks

Multiple Box Shadows

This came in handy for me earlier today. You can add multiple box-shadows to an element. Simply separate them by a comma:

.element {
    box-shadow:
        0 0 0 3px rgba(139, 168, 190, 0.4),
        inset 0 20px 20px -15px rgba(255,255,255, 0.6),
        inset 0 -20px 20px -15px rgba(255,255,255,0.6);
}

In this case, the first shadow is simulating a transparent border around the element. The second and third shadows are helping to simulate a light gradient over the object.