Set both inset and outset box shadow using CSS
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
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