Last Updated: February 25, 2016
· 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 {
        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.