Effects
Box Shadow
Utilities for sets the box-shadow property attaches one or more shadows to an element.
Variant
Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited
API
Dreamy
| class | css | |
|---|---|---|
| shadow-dreamy-xs | box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(0, 0, 0, 0.02), 0 0 0 1px rgba(0, 0, 0, 0.01) | |
| shadow-dreamy-sm | box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 6px 0 rgba(0, 0, 0, 0.03), 0 1px 8px 0 rgba(0, 0, 0, 0.02) | |
| shadow-dreamy | box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 6px 0 rgba(0, 0, 0, 0.05), 0 1px 9px 0 rgba(0, 0, 0, 0.04), 0 1px 12px 0 rgba(0, 0, 0, 0.03) | |
| shadow-dreamy-md | box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 3px 7px -1px rgba(0, 0, 0, 0.05), 0 2px 8px -1px rgba(0, 0, 0, 0.04), 0 1px 9px -1px rgba(0, 0, 0, 0.03) | |
| shadow-dreamy-lg | box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 16px -3px rgba(0, 0, 0, 0.05), 0 3px 17px -3px rgba(0, 0, 0, 0.03), 0 1px 18px -3px rgba(0, 0, 0, 0.01) | |
| shadow-dreamy-xl-1 | box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 26px -3px rgba(0, 0, 0, 0.04), 0 3px 27px -3px rgba(0, 0, 0, 0.02), 0 1px 28px -3px rgba(0, 0, 0, 0.01) | |
| shadow-dreamy-xl-2 | box-shadow: 0 10px 35px -3px rgba(0, 0, 0, 0.08), 0 4px 36px -3px rgba(0, 0, 0, 0.07), 0 3px 37px -3px rgba(0, 0, 0, 0.06), 0 1px 38px -3px rgba(0, 0, 0, 0.05) |
Solid
| class | css | |
|---|---|---|
| shadow-xs | box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) | |
| shadow-sm | box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) | |
| shadow | box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) | |
| shadow-md | box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) | |
| shadow-lg | box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) | |
| shadow-xl-1 | box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) | |
| shadow-xl-2 | box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) | |
| shadow-inner | box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) | |
| shadow-outline | box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5) | |
| shadow-none | box-shadow: none |
Usage
Set multiplied dreamy shadow to an element.
<!-- parent -->
<div class="shadow-dreamy ... bg-white ... width-32 height-32">
...
</div>
HTML
.dummy {
@extend
.shadow-dreamy,
.bg-white,
.width-32,
.height-32;
}
SCSS
Set basic solid shadow to an element.
<!-- parent -->
<div class="shadow ... bg-white ... width-32 height-32">
...
</div>
HTML
.dummy {
@extend
.shadow,
.bg-white,
.width-32,
.height-32;
}
SCSS
Use (expand) variant to apply box shadow to all child elements.
<!-- parent -->
<div class="(expand)shadow-lg">
<!-- child -->
<div> ... </div>
<div> ... </div>
<div> ... </div>
</div>
HTML
.dummy {
@extend
.(expand)shadow-lg;
SCSS