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) |
Usage


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 |