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

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

Variant	Enabled	Responsive
Default	Yes
Dark Theme
hover
group-hover
focus
focus-within
active
visited
checked
disabled