Re: [compositing?] Blurring an elementís backdrop

This looks like a case of blending since it takes 2 inputs and changes
colors. Filters always have 1 input and compositing works by applying alpha
in different ways.
I can see 2 ways of implementing this:
1. provide support for custom blending through shaders like we do in
This would be very powerful but hard to use since the user would have to
learn a new language.

2. extend the blend-mode syntax [2] so you can specify a filter operation
on the source or the background.
This is not quite as powerful but more intuitve.
For instance, the Windows 7 example could be done as:

background: linear-gradient(...)

background-blendmode: color-burn(blur(5px), opacity(...))

The shadow in the taskbar could be done as an axial gradient in an
additional background layer.

[2]: +

On Sun, Apr 15, 2012 at 8:38 PM, Lea Verou <> wrote:

> One of the most common use cases of blurring I have encountered (both in
> my own work and of others) is blurring an elementís backdrop. Not only does
> it make designs more visually appealing, but also helps to make text more
> legible over complex backdrops. This is exactly the reason why it's widely
> used on native interfaces that include semi transparent containers, such as
> the Windows 7 Aero enviromment [1].
> Currently, authors are relying on inflexible hacks that require multiple
> images for simulating this effect [2]. Even with the current CSS Filters
> proposal [3], this is not possible in the general case, since filters
> operate on an element without taking its backdrop into account. Perhaps it
> could be added as a blending mode [4], but I think it might be outside the
> scope of that spec, since blending modes seem to only operate on pixel
> colors (operations of the sort result pixel color = f(element's pixel
> color, backdrop pixel color) for every pixel), without taking surrounding
> pixels into account.
> I'm not sure I have a concrete proposal, as my knowledge is very limited
> on whatís possible (efficiently) in this area. However, it's a very common
> use case that needs to be addressed somehow.
> [1]:**Windows_7_Aero_Peek_Feature/3-**
> before-peek.png<>
> [2]:**background-effect/<>
> [3]:**raw-file/tip/filters/index.**html<>
> [4]:**rawfile/tip/compositing/index.**html<>
> --
> Lea Verou ( | @LeaVerou)

Received on Monday, 16 April 2012 04:53:51 UTC