Shadows

Shadows tokens definitions

Shadow name Value
44 0px 16px 32px rgba(0, 0, 0, 0.2)
43 0px 8px 16px rgba(0, 0, 0, 0.2)
42 0px 4px 8px rgba(0, 0, 0, 0.2)
41 0px 2px 4px rgba(0, 0, 0, 0.2)
34 0px 0px 32px rgba(0, 0, 0, 0.2)
33 0px 0px 16px rgba(0, 0, 0, 0.2)
32 0px 0px 8px rgba(0, 0, 0, 0.2)
31 0px 0px 4px rgba(0, 0, 0, 0.2)
24 0px 16px 32px rgba(0, 0, 0, 0.1)
23 0px 8px 16px rgba(0, 0, 0, 0.1)
22 0px 4px 8px rgba(0, 0, 0, 0.1)
21 0px 2px 4px rgba(0, 0, 0, 0.1)
14 0px 0px 32px rgba(0, 0, 0, 0.1)
13 0px 0px 16px rgba(0, 0, 0, 0.1)
12 0px 0px 8px rgba(0, 0, 0, 0.1)
11 0px 0px 4px rgba(0, 0, 0, 0.1)
    <div class="u-bs-44">Box shadow 44</div>
    <div class="u-bs-43">Box shadow 43</div>
    <div class="u-bs-42">Box shadow 42</div>
    <div class="u-bs-41">Box shadow 41</div>

    <div class="u-bs-34">Box shadow 34</div>
    <div class="u-bs-33">Box shadow 33</div>
    <div class="u-bs-32">Box shadow 32</div>
    <div class="u-bs-31">Box shadow 31</div>

    <div class="u-bs-24">Box shadow 24</div>
    <div class="u-bs-23">Box shadow 23</div>
    <div class="u-bs-22">Box shadow 22</div>
    <div class="u-bs-21">Box shadow 21</div>

    <div class="u-bs-14">Box shadow 14</div>
    <div class="u-bs-13">Box shadow 13</div>
    <div class="u-bs-12">Box shadow 12</div>
    <div class="u-bs-11">Box shadow 11</div>
    <!-- DEMO ONLY -->
    <style>
        body{padding:4em}
        div{padding:2em;margin-bottom:4em;}
    </style>