Home Digital garden Troubles with backdrop-filter and SVG clipping

Troubles with backdrop-filter and SVG clipping

Seedling

Navigation menu story

While building the navigation menu for a past version of this site, I had some troubles getting it to work. I wanted it to have a frosted glass look as well as a wavy shape. The links below helped me get it working.

Backdrop filter

backdrop-filter on MDN
Can I use CSS backdrop filter

Clip path

clip-path on MDN
path()
url()

Mask image

mask-image on MDN
Can I use CSS masks

Paths, shapes, clipping and masking

The CSS Podcast

Cascading Style Sheets (CSS) is the web’s core styling language. For web developers, It’s one of the quickest technologies to get started with, but one of the hardest to master. Follow Una Kravets and Adam Argyle, Developer Advocates from Google, who gleefully breakdown complex aspects of CSS into d…