madeas,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.flex {
display: flex;
}
.block {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
border: 0;
background: #fff !important;
}
.block::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background-color: #fff;
}
.bShadow-1{-webkit-box-shadow:0px 1px 1px 1px rgba(0,0,0,0.06);-moz-box-shadow:0px 1px 1px 1px rgba(0,0,0,0.06);box-shadow:0px 1px 1px 1px rgba(0,0,0,0.06);}
.bShadow-2{-webkit-box-shadow:0 0 20px 0 rgba(150,150,150,.1);-moz-box-shadow:0 0 20px 0 rgba(150,150,150,.1);box-shadow:0 0 20px 0 rgba(150,150,150,.1);}
.bShadow-3{-webkit-box-shadow:0 20px 60px -10px rgba(0,0,0,.1);-moz-box-shadow:0 20px 60px -10px rgba(0,0,0,.1);box-shadow:0 20px 60px -10px rgba(0,0,0,.1);}
.bShadow-4{-webkit-box-shadow:0 15px 45px -9px rgba(0,0,0,0.25);-moz-box-shadow:0 15px 45px -9px rgba(0,0,0,0.25);box-shadow:0 15px 45px -9px rgba(0,0,0,0.25);}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
function getShadow(e) {
var s = getComputedStyle(e).boxShadow;
return "{<br>" + "-webkit-box-shadow: " + s + "; <br>" + "-moz-box-shadow: " + s + "; <br>" + "box-shadow: " + s + "<br>}"
}
var b = $(".block"),
out = $(".out"),
text;
b.on("click", function() {
text = $.map(b.filter(":checked"), function(e) {
return "<br>" + e.className.match(/bS\S+/)[0] + getShadow(e)
});
out.html(text)
})
});
</script>
</head>
<body>
<div class="flex numbers">
<input type="checkbox" class="block bShadow-1">
<input type="checkbox" class="block bShadow-2">
<input type="checkbox" class="block bShadow-3">
<input type="checkbox" class="block bShadow-4">
</div>
<div class="out"></div>
</body>
</html>