Create accountLogin

Recent searches

No recent searches

Search options

Only available when logged in.
mastodon.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
The original server operated by the Mastodon gGmbH non-profit

Administered by:

Server stats:

361K
active users

mastodon.social: AboutStatusProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.4.0-nightly.2025-03-19

Ana Tudor 🐯

gotcha:

drop-shadow(2px 2px 5px var(--c))

has the SVG equivalent

<feDropShadow dx='2' dy='2' stdDeviation='5' flood-color='var(--c)'/>

But changing `--c` on one of the elements the SVG is applied on doesn't change the filter result!

Screenshot illustrating the above. `--c` is set to `orangered` on the body and this is the value used for the drop shadow created by the SVG filter, regardless of what value `--c` has on the element the SVG filter is applied on. By contrast, when using a CSS drop shadow filter, the value of `--c` is the one set on the element the filter is applied on.
#svgFilter#code#coding
Mar 09, 2025, 01:09 PM·Public
3boosts·1favorite
Public
Ana Tudor 🐯

The @codepen demo:
codepen.io/thebabydino/pen/ZYE

uses the --c value set on the div it's applied to, one uses the --c value set upstream from it on the body.

This means we need different SVG filters for different flood-color values. 😭

There are workarounds - stay tuned! 😼

codepen.ioSVG filter gotcha...
#svgFilter#cssFilter#code
Public
Ana Tudor 🐯

So this little thing got featured on @codepen 😼

Screenshot of my demo on the trending page.
ExploreLive feeds
About