backdrop-filter: blur()
Important: This test will only succeed in WebKit-based browsers (starting with iOS Safari 9.3 and Mac OS X Safari 10) and browsers that support the standard CSS backdrop blur filter.
Embedded content
Text on a backdrop with a blur value of 12px
Text on a backdrop with a blur value of 9px
Fig. 1. The CSS backdrop-filter blurs an underlying image embedded in an HTML img tag.
Bacground image
Text on a backdrop with a blur value of 6px
Fig. 2. The CSS backdrop-filter blurs the background image of its parent container.
Text
Lorem ipsum dolor sit amet, consectetur adipscing elit, sed diam nonnumy tempor incidunt ut labore et dolore magna aliquam erat volupat. Ut enim ad minimim veniami quis nostrud exercitation ullamcorpor suscipit laboris nisi ut aliquip ex ea commodo consequat. Duis autem vel eum irure dolor in reprehenderit in voluptate velit esse molestaie son consequat, vel illum dolore eu fugiat nulla pariatur. At vero eos et accusam et justo odio dignissim qui blandit praesent lupatum delenit aigue duos dolor et molestais exceptur sint occaecat cupidat non provident, simil tempor sunt in culpa qui officia deserunt mollit anim id est laborum et dolor fugai. Et harumd dereud facilis est er expedit distinct. Nam liber a tempor cum soluta nobis eligend optio comque nihil quod a impedit anim id quod maxim placeat facer possim omnis es voluptas assumenda est, omnis dolor repellend. Temporem autem quinsud et aur office debit aut tum rerum necessit atib saepe eveniet ut er repudiand sint et molestia non este recusand. Itaque earud rerum hic tenetury sapiente delectus au aut prefer endis dolorib asperiore repellat. Hanc ego cum tene sententiam, quid est cur verear ne ad eam non possing accommodare nost ros quos tu paulo ante cum memorite it tum etia ergat. Nos amice et nebevol, olestias access potest fier ad augendas cum conscient to factor tum toen legum odioque civiuda.
Text on a backdrop with a blur value of 3px
Fig. 3. The CSS backdrop-filter blurs underlying text.
Hover
Fig. 4. Hover over image to remove blur.
Image courtesy of Pixabay.