waterdrop is an SVG filter that creates an edge distortion effect, similar to Apple's Liquid Glass. It can be applied to any HTML element.
The filter can be applied as a single backdrop-filter rule.
The filter will apply a rounded background, so using border-radius: 40px is recommended, especially if other effects are applied.
backdrop-filter: blur(2px) url("waterdrop.svg#waterdrop") blur(2px); /* Adjust pre/post blur to taste */
border-radius: 40px;
Firefox and Webkit browsers don't support the required backdrop-filter capabilities, and will not render the background.
The filter has a hardcoded border radius. Each radius will require its own variant of the filter SVG.