This 9-minute video from Juxtopposed on blurring is a great watch. There are an awful lot of ways to blur things on the web, from filter
, backdrop-filter
, <feGaussianBlur>
, to WebGL. I particularly like the idea of masking an element with a backdrop-filter
with a gradient so, for instance, a header can fade out how much blur is being applied.
How to Get the Width/Height of Any Element in Only CSS
Unlike JavaScript, there is no simple built-in method in CSS to access an element’s width and height. But using some (call it hacky) modern CSS techniques, we can get our hands on the number and even use it.