Effects

Box Shadow

Utilities for sets the box-shadow property attaches one or more shadows to an element.


Class

Dreamy v1.1.0

classcss
shadow-dreamy-xsbox-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-smbox-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-dreamybox-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-mdbox-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-lgbox-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-xlbox-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-2xlbox-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

classcss
shadow-xsbox-shadow:
0 0 0 1px rgba(0, 0, 0, 0.05)
shadow-smbox-shadow:
0 1px 2px 0 rgba(0, 0, 0, 0.05)
shadowbox-shadow:
0 1px 3px 0 rgba(0, 0, 0, 0.1),
0 1px 2px 0 rgba(0, 0, 0, 0.06)
shadow-mdbox-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06)
shadow-lgbox-shadow:
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05)
shadow-xlbox-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04)
shadow-2xlbox-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.25)
shadow-innerbox-shadow:
inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)
shadow-outlinebox-shadow:
0 0 0 3px rgba(66, 153, 225, 0.5)
shadow-nonebox-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

VariantEnabledResponsive
DefaultYes
Dark Theme
hoverYes
group-hover
focusYes
focus-withinYes
active
visited
checked
disabled