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="...">

Customize More

// @file: `src/_plugins.scss`
@include plugin(
(
utility: 'filter.drop-shadow',
//variant: 'responsive',
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

VariantEnabledResponsive
DefaultYes
Dark Theme
hover
group-hover
focus
focus-within
active
visited
checked
disabled