Effects
Box Shadow
Utilities for sets the box-shadow property attaches one or more shadows to an element.
Class
Dreamy v1.1.0
| 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 | 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-2xl | 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 | box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) | |
| shadow-2xl | 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.
<!-- Example -->
<y class="shadow-dreamy ... bg-white h-32 w-32"></y>Set basic solid shadow to an element.
<!-- Example -->
<y class="shadow ... bg-white h-32 w-32"></y>Customize More
// @file: `src/_plugins.scss`
@include plugin(
(
utility: 'shadow',
//variant: 'responsive',
property: 'box-shadow',
modifier: (
'3xl': '...',
'4xl': '...'
...
)
)
)Variant
| Variant | Enabled | Responsive |
|---|---|---|
| Default | Yes | |
| Dark Theme | ||
| hover | Yes | |
| group-hover | ||
| focus | Yes | |
| focus-within | Yes | |
| active | ||
| visited | ||
| checked | ||
| disabled |
