GPU Acceleration of CSS Filters in Chromium

    One of the innovations in Chromium 19 is CSS filters with hardware graphics acceleration. Using the property filter, pixel-by-pixel processing of any visible element on the page is performed - with just one line of CSS.

    Combining different parameters in a line, you can come up with original effects.


    img { -webkit-filter: sepia(100%) contrast(200%) blur(5px) }

    Filter parameters: sepia, saturation, transparency, blur, brightness, inversion, contrast, shadow creation and others. This is a great way to improve the design of the page, as well as create web applications and games with new features.

    In the presence of a normal GPU-card, the effects work completely without slowdowns and even allow you to run the graphical editor in a browser, fully implemented in CSS, and even with the use of animation -webkit-transition.



    For more information on using CSS-filters, see. For filters reference to HTML5Rocks ( translated into Russian. LANG. ).

    We add that in the future, web designers will have the opportunity to create their own filters to apply them exclusively on their site.

    Also popular now: