There are two approaches described in this article. The first approach, shown in Figure 1 below, uses two transparent PNGs.
One PNG serves as the background (i.e.: things far away from the camera), the other PNG, for the foreground, is absolutely position on top of the background image. Then a CSS blur animation is applied to both images with two selectors. Two selectors are required to create the alternating blur and focus between the two images. When the foreground is in focus, the background is blurred and vice versa.
The second approach to creating depth-of-field uses SVG clip path to define a polygonal shape to blur. In Figure 2 below, the SVG clip path, outlined in orange defines a foreground area to which we can apply the CSS blur selector for an animation.
Each approach is functional in modern browsers. It is worth noting that the second approach, with SVG, is more performant. This is because one image is used and that image is a JPG, much smaller in file size. The other approach uses two PNGs, significantly larger in size. Thanks reddit user tjuk for pointing this out!