Press/to search

Filters

Drop Shadow v1.0.9

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


Class

classcss
filter {drop-shadow}filter: brightness(var(--brightness)) contrast(var(--contrast)) saturate(var(--saturate)) blur(var(--blur)) drop-shadow(var(--drop-shadow))
classcss
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: OFFFilter: 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.