/ css

CSS Backdrop Filter

Webkit is introducing something that might be one of the most requested features since border-radius.

backdrop-filter is the answer of the visual effect that Apple has incorporated their operating systems, and many of us has tried to mimic on our websites.

backdrop-filter: blur(10px);

backdrop-filter-blur

Not only for blur, backdrop-filter will accept any filter function.

none | <filter-function-list>
where
<filter-function-list> = [ <filter-function> | <url> ]+
where
<filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow() href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar" <a="">| <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <sepia()> | <saturate()></drop-shadow()>

backdrop-filter-invert

It will also work over videos, and could be an animated property.

Currently it's only supported on latest version of Safari (9.0). It's defined on Editor's Draft in the Filter Effects Module Level 2 specs.

Demo:

See the Pen ZbEGar by Rodrigo Espinosa Curbelo (@rec) on CodePen.

Scroll and hit "Rerun" to get a new picture.

  • Images and information from webkit blog.

  • Thanks MDN for always being a great resource.