Box shadows can be applied using the shadow utilities. By default these are a linear scale, where the lower values represent smaller (shallow) shadows, and higher values represent bigger (deeper) shadows.
<divclass="flex text-sm my-6">
<divclass="mr-3 p-4 shadow-1">.shadow-1</div>
<divclass="mr-3 p-4 shadow-2">.shadow-2</div>
<divclass="p-4 shadow-3">.shadow-3</div>
</div>
```html
<divclass="shadow-1"></div>
<divclass="shadow-2"></div>
<divclass="shadow-3"></div>
```
```less
div {
.shadow-1;
.shadow-2;
.shadow-3;
}
```
### Customizing shadows
You can customize the shadow utilities using the `@shadows` variable. Please note that the entire scale must be redefined. It's not possible to add a new value to the existing scale. Shadows can be defined with multiple `box-shadow` values, as illustrated below.
