Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<style>
body {
margin: 0;
}
/* With negative spread of -10px and blur of 20px, the inset shadow
starts 10px away from the edge with a 20px blur */
.container {
width: 100px;
height: 100px;
background: white;
border: 10px solid black;
margin: 20px;
overflow: hidden;
}
.shadow-inner {
width: 100%;
height: 100%;
box-shadow: inset 0 0 20px -10px red;
}
</style>
<div class="container">
<div class="shadow-inner"></div>
</div>