Set both inset and outset box shadow using CSS

Question

The box-shadow property has a property value called inset, so the shadow can be inset, or outset.

But how is it possible, to set both inset, and outset shadow for a div in CSS?

Answer 1

You need to separate them using a ,

div {   margin: 50px;   height: 100px;   width: 100px;   border: 1px solid #aaa;   border-radius: 50%;   box-shadow: inset 0 0 5px tomato, 0 0 5px black; }

<div></div>

Demo

Demo 2 (Nothing different, but used white border for better indication)

So here in the above example, it sets the shadow inset with the tomato color, and the other set of rules separated using a comma is for outset i.e black shadow

Answer 2

You need to use comma to separate both shadows.

div{     top: 100px;     position: absolute;     left: 100px;     height: 100px;     width: 100px;     box-shadow: 10px 10px 10px grey, 0 0 10px black;     border-radius: 5px;     background: white; } 

See demo