Elevation

Specifies the box-shadow of an element.

Classes
Class Properties
shadow-none box-shadow: none;
shadow-1 box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.02), 0px 0px 2px rgba(0, 0, 0, 0.05), 0px 1px 4px rgba(0, 0, 0, 0.08);
shadow-2 box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.03), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 2px 6px rgba(0, 0, 0, 0.12);
shadow-3 box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.08), 0px 3px 4px rgba(0, 0, 0, 0.1), 0px 1px 4px -1px rgba(0, 0, 0, 0.1);
shadow-4 box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
shadow-5 box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.1), 0px 4px 5px -2px rgba(0, 0, 0, 0.12), 0px 10px 15px -5px rgba(0, 0, 0, 0.2);
shadow-6 box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.06), 0px 7px 9px rgba(0, 0, 0, 0.12), 0px 20px 25px -8px rgba(0, 0, 0, 0.18);
shadow-7 box-shadow: 0px 7px 30px rgba(0, 0, 0, 0.08), 0px 22px 30px 2px rgba(0, 0, 0, 0.15), 0px 8px 10px rgba(0, 0, 0, 0.15);
shadow-8 box-shadow: 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 11px 15px rgba(0, 0, 0, 0.2);
Examples
shadow-none
shadow-1
shadow-2
shadow-3
shadow-4
shadow-5
shadow-6
shadow-7
shadow-8

<div class="grid grid-nogutter">
    <div class="col">
        <div class="box shadow-none">shadow-none</div>
    </div>
    <div class="col">
        <div class="box shadow-1">shadow-1</div>
    </div>
    <div class="col">
        <div class="box shadow-2">shadow-2</div>
    </div>
    <div class="col">
        <div class="box shadow-3">shadow-3</div>
    </div>
    <div class="col">
        <div class="box shadow-4">shadow-4</div>
    </div>
    <div class="col">
        <div class="box shadow-5">shadow-5</div>
    </div>
    <div class="col">
        <div class="box shadow-6">shadow-6</div>
    </div>
    <div class="col">
        <div class="box shadow-7">shadow-7</div>
    </div>
    <div class="col">
        <div class="box shadow-8">shadow-8</div>
    </div>
</div>

Responsive

Responsive alternatives are available for customizations based on screen size. Add the responsive breakpoint keyword followed by a semi-colon as a prefix such as md:shadow-2 to use a responsive class.

  • sm: small screens e.g. phones
  • md: medium screens e.g. tablets
  • lg: large screens e.g. notebooks
  • xl: larger screens e.g monitors
shadow-1 on small screen

<div class="card flex flex-wrap align-items-center justify-content-center">
    <div class="shadow-1 md:shadow-none surface-50 p-3 m-3 flex align-items-center justify-content-center font-bold text-blue-500" style="width: 250px; min-height: 200px">
        shadow-1 on small screen
    </div>
</div>