Effects

Box Shadow

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

Class

Dreamy v1.1.0

Solid

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.