Filters

Drop Shadow v1.0.9

Utilities for sets shadow filter to transparency image (SVG, PNG).

Class

class	css
filter `{drop-shadow}`	filter: brightness(var(--brightness)) contrast(var(--contrast)) saturate(var(--saturate)) blur(var(--blur)) drop-shadow(var(--drop-shadow))

class	css
drop-shadow-xs	--drop-shadow: 0px 0px 1px rgba(0, 0, 0, 0.8)
drop-shadow-sm	--drop-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5)
drop-shadow-md	--drop-shadow: 0px 4px 3px rgba(0, 0, 0, 0.5)
drop-shadow-lg	--drop-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5)
drop-shadow-xl	--drop-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5)

Note: This utility does not support the inline property background-image:url() .

Usage

Filter: OFF

Filter: ON

Apply the filter class first, and then set the filter in any order when with other filters.

<!-- Example -->
<img class="filter drop-shadow-md ..."
     src="...">

Mix with other filters, such as Brightness, Contrast, Saturate and Blur.

<!-- Example -->
<img class="filter drop-shadow-md brightness-10 contrast-5 saturate-4 blur-5 ..."
     src="...">

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: 'filter.drop-shadow',
  $property: --drop-shadow,
  $modifier: (
    2xl: 0px 10px 15px rgba(0, 0, 0, 0.5),
    3xl: 0px 10px 20px rgba(0, 0, 0, 0.5)
    //...
  )
);

Variant

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

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