Shadows (Elevations)
Simple yet effective way to add shadows to create a depth/elevation effect. The shadows are the same of Tailwindcss standards.
Usage
| CSS Class Name | Properties |
|---|---|
| shadow-sm | box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); |
| shadow | box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); |
| shadow-md | box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); |
| shadow-lg | box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); |
| shadow-xl | box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); |
| shadow-2xl | box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); |
| shadow-inner | box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);v |
| shadow-none | box-shadow: 0 0 #0000; |
Basic Usage
html
<div class="shadow-md ..."></div>
<div class="shadow-lg ..."></div>
<div class="shadow-xl ..."></div>
<div class="shadow-2xl ..."></div>Adding an inner shadow
html
<div class="shadow-none ..."></div>