In my quest for achieving unique visual effects, I have been experimenting with the backdrop-filter and element borders. While it is easy to create an element that blurs its background, I am facing challenges in making the filter affect only the border area of the element.
https://i.sstatic.net/XD7x7.png While the above effect can be achieved with CSS, I am wondering if it is possible to create the following effects:
- A scenario where the backdrop of the element is blurred, while the border brightens the backdrop. My attempts have shown that applying the
backdrop-filteraffects only the box of the element, not its children (e.g., adding a border increases the filtered area). See example below https://i.sstatic.net/cwj6H.png - A situation where the element itself is blurred with a backdrop filter, as shown in the example below https://i.sstatic.net/dnkd6.png
- An effect where the border of an element is blurred with a backdrop filter, like in the example below https://i.sstatic.net/qBpvu.png
On a slightly different note, I am curious about whether it is feasible to clip the background using the border of an element. For instance, see the image below where I attempted using clip-path but struggled to achieve a rounded bounding area. https://i.sstatic.net/dgvgc.png
I suspect that most of these effects may not be currently achievable due to the limitation of the backdrop filter applying only to the specified element and not being able to stack with child elements.