How to make box-shadow inside transparent element - css

Question

When the element is transparent, the shadow isn't inside that element. Look at this example:
box-shadow: 0px 0px 50px 30px rgba(0, 0, 0, 0.5);
https://jsfiddle.net/yrqvdbux/6/
html, body {
width:100%;height:100%; margin:0;
}
* {
box-sizing:border-box;
}
.bg {
width:100%; height:100%;
background-color:#33FF55;
}
.shadow {
width:100px; height:100px;
position:absolute;
top:100px; left:100px;
box-shadow: 0px 0px 50px 30px rgba(0, 0, 0, 0.5);
}
<div class="bg">
<div class="shadow"></div>
</div>
How to make the shadow inside the box?
When i add background-color property it looks quite good, but look at the corners, it doesn't fit.
https://jsfiddle.net/y8o47pm9/5/
html, body {
width:100%;height:100%; margin:0;
}
* {
box-sizing:border-box;
}
.bg {
width:100%; height:100%;
background-color:#33FF55;
}
.shadow {
width:100px;
position:absolute;
top:100px; left:100px;
box-shadow: 0px 0px 50px 30px rgba(0, 0, 0, 0.5);
background-color: rgba(0, 0, 0, 0.45);
color:#fff;
font-size:25px;
text-align:center;
padding:20px 0;
}
<div class="bg">
<div class="shadow">Test</div>
</div>

Answer 1

Use inset to make the shadow inside the box.
Replace the box-shadow: 0px 0px 50px 30px rgba(0, 0, 0, 0.5); with box-shadow: inset 0px 0px 10px 3px rgba(0, 0, 0, 0.5);
html, body {
width:100%;height:100%; margin:0;
}
* {
box-sizing:border-box;
}
.bg {
width:100%; height:100%;
background-color:#33FF55;
}
.shadow {
width:100px; height:100px;
position:absolute;
top:100px; left:100px;
box-shadow: inset 0px 0px 10px 3px rgba(0, 0, 0, 0.5);
}
<div class="bg">
<div class="shadow"></div>
</div>