Say we have a single image tag, and we need to blur a specific part of it (for example, for censorship purposes). In the example, we'll say our target image is 100px by 100px, and we want to censor the rectangle at x=25, y=40 with width=20, height=35. How can this be done using CSS?
This is straightforward if you have a parent container, as you can simply render an offset portion of the same image, with a clip or a backdrop-filter applied. However, this is not reliable for my use case, as I cannot guarantee the positioning attributes of the parent and the image itself, so I may not be positioning the element correctly.
<div id="parent">
<img src="/path/to/img.png">
<!-- This -->
<img
id="blurred"
src="/path/to/img.png"
style="clip: rect(25, 40, 20, 35); filter: blur(8px);"
/>
<!-- Or this -->
<div style="left: 25px; top: 40px; width: 20px; height: 35px; backdrop-filter: blur(8px);" />
</div>
On the other hand, if you just have the image, with no access to the parent, CSS might be the only way. There is clip-path and mask.
With clip-path, you're removing everything outside the path, but we want to do the opposite by blurring everything inside the path. You can finesse the path clip the target "portion" while leaving the remainder of the image, but this doesn't seem to support the filter, you're left with an empty white block where you want your blur to be (I haven't had much luck figuring out how to apply the blur here). While this achieves the censorship purpose, it doesn't achieve the UX desired with a blur.
<!-- Reference SVG clip path -->
<svg height="100%" width="100%" viewBox="0 0 100 100">
<defs>
<clipPath id="clip">
<path d="M 0,0 l 100,0 0,100 -100,0 Z M 25,40 l 20,0 0,35 -20,0 Z" />
</clipPath>
</defs>
</svg>
<!-- Clipped image -->
<img src="/path/to/img.png" style="clip-path: url(#clip);" />
A mask has a similar constraint, as we are drawing the image through the mask, which means that we can create a mask of the filtered and blurred parts of the image, and "draw those through the mask" onto the target image. However, this more or less defeats the purpose, as we need to re-render the image in the SVG tag separately, and is brittle if the user resizes the page / image, for example.
Appreciate any suggestions. This has had me stumped for a few days now.