A cross-browser collection of CSS box-shadows

<div class="flex numbers">
		<div class="alert text-center uppercase pl-sg">
		  <h3>Complete</h3>
		</div>
                <div class="block bShadow-1"></div>
                <div class="block bShadow-2"></div>
                <div class="block bShadow-3"></div>
                <div class="block bShadow-4"></div>
                <div class="block bShadow-5"></div>
                <div class="block bShadow-6"></div>
                <div class="block bShadow-7"></div>
                <div class="block bShadow-8"></div>
                <div class="block bShadow-9"></div>
                <div class="block bShadow-10"></div>
                <div class="block bShadow-11"></div>
                <div class="block bShadow-12"></div>
                <div class="alert text-center uppercase pl-sg">
		  <h3>Upper shadow</h3>
		</div>
                <div class="block bShadow-13"></div>
                <div class="block bShadow-14"></div>
                <div class="block bShadow-15"></div>
                <div class="block bShadow-16"></div>
                <div class="block bShadow-17"></div>
                <div class="block bShadow-18"></div>
                <div class="block bShadow-19"></div>
                <div class="block bShadow-20"></div>
                <div class="alert text-center uppercase pl-sg">
		  <h3>Angle</h3>
		</div>
                <div class="block bShadow-21"></div>
                <div class="block bShadow-22"></div>
                <div class="block bShadow-23"></div>
                <div class="block bShadow-24"></div>
                <div class="block bShadow-25"></div>
                <div class="block bShadow-26"></div>
                <div class="block bShadow-27"></div>
                <div class="block bShadow-28"></div>
                <div class="block bShadow-29"></div>
                <div class="block bShadow-30"></div>
                <div class="block bShadow-31"></div>
                <div class="block bShadow-32"></div>
                <div class="block bShadow-33"></div>
                <div class="block bShadow-34"></div>
                <div class="block bShadow-35"></div>
                <div class="block bShadow-36"></div>
                <div class="block bShadow-37"></div>
                <div class="block bShadow-38"></div>
                <div class="block bShadow-39"></div>
                <div class="block bShadow-40"></div>
                <div class="block bShadow-41"></div>
                <div class="block bShadow-42"></div>
                <div class="alert text-center uppercase pl-sg">
		  <h3>Down</h3>
		</div>
                <div class="block bShadow-43"></div>
                <div class="block bShadow-44"></div>
                <div class="block bShadow-45"></div>
                <div class="block bShadow-46"></div>
                <div class="block bShadow-47"></div>
                <div class="block bShadow-48"></div>
                <div class="block bShadow-49"></div>
                <div class="alert text-center uppercase pl-sg">
		  <h3>Blur collection</h3>
		</div>
                <div class="block bShadow-50"></div>
                <div class="block bShadow-51"></div>
                <div class="block bShadow-52"></div>
                <div class="block bShadow-53"></div>
                <div class="block bShadow-54"></div>
                <div class="block bShadow-55"></div>
                <div class="block bShadow-56"></div>
                <div class="block bShadow-57"></div>
                <div class="alert text-center uppercase pl-sg">
		  <h3>Side shadows</h3>
		</div>
                <div class="block bShadow-58"></div>
                <div class="block bShadow-59"></div>
                <div class="block bShadow-60"></div>
                <div class="block bShadow-61"></div>
                <div class="block bShadow-62"></div>
                <div class="alert text-center uppercase pl-sg">
		  <h3>UpDown shadow</h3>
		</div>
                <div class="block bShadow-63"></div>
                <div class="block bShadow-64"></div>		
                </div>

:root {
    --primary-color: rgb(81, 204, 226);    
}
.blocks, .flex {
    position: relative;
    display: block;
    padding: 0;
    margin: 0 auto;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: space-around;
    counter-reset: figures;
}
.block {
    position: relative;
    background-color: white;
    color: rgb(81, 204, 226);
    width: 200px;
    height: 200px;
    line-height: 200px;
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1.25rem;
    text-align: center;
    margin: 40px 30px;
}
.flex .block {
    counter-increment: figures;
}
.flex .block:before {
    content: 'bShadow-' counter(figures);
}
.pl-sg {
    color: #959da5;
}
.alert {
    display: block;
    width: 100%;
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #ddd;
    border-radius: .25rem;
}