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() {
var b = $(".block"), out = $(".out"), text;
b.on("click", function() {
text = this.className + " " + $(this).css("box-shadow")
out.text(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>