Contexto
Los efectos de filtro existen desde hace tiempo, pero se diseñaron para funcionar en SVG. Son muy potentes para aplicar efectos como intensidad de color, deformación o desenfoque a una imagen antes de que se componga y renderice en el documento.
En 2009, Mozilla dijo que SVG no era suficiente. Finalmente, llevaron los filtros un paso más allá y los permitieron en el contenido HTML en Firefox 3.5. Consulta la demo atemporal de Paul Irish sobre los filtros de SVG en un <video> en reproducción. Una vez más, solo funciona en Firefox, pero sigue siendo lo mejor.
Hoy
A fines de 2011, Adobe (y otros) trabajaron arduamente para llevar esta increíble tecnología al CSS. Específicamente, me refiero a los Efectos de filtro CSS 1.0, que WebKit comenzó a implementar.
Habilitar los filtros directamente en CSS significa que casi cualquier elemento DOM puede aprovecharlos. Imágenes, <video>, <canvas>, lo que quieras.
Futuro
La especificación también define los shaders de CSS, que eventualmente llevarán la tecnología de sombreadores de OpenGL a CSS. ¡Eso es muy emocionante! Sin embargo, hay consideraciones de seguridad cada vez que abres la GPU de un sistema. Por este motivo, WebKit solo tiene implementadas las funciones de filtro de CSS por el momento.
Asistencia
Chrome 18.0.976.0 (actualmente Canary), Webkit nocturno
En las compilaciones nocturnas de Webkit, los filtros se pueden aplicar al contenido con aceleración de hardware ( p.ej., img { -webkit-transform: translateZ(0); }). En Chrome, los filtros en el contenido acelerado aún están en desarrollo (usa la marca --enable-accelerated-filters). Esto incluye <video>, que se acelera de forma predeterminada.