Press/to search

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>

Customization

Read more information about using the Plugin API, and Responsive or Pseudo-Class Variants configuration with the Plugin API.

// Add Values
@include yogurt(
$class: 'shadow',
$property: box-shadow,
$modifier: (
xs: 0 0 0 1px rgba(0, 0, 0, 0.05),
sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05)
//...
)
);

// Add Variants
@include yogurt(
$class: 'shadow',
$property: box-shadow,
$modifier: (
xs: 0 0 0 1px rgba(0, 0, 0, 0.05),
sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05)
//...
),
$variant: (
'hover',
'focus', 'focus-within', 'focus-visible'
//...
)
);

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.