Skip to main content

Chrome and WebKit get CSS background blends

Adobe engineer Mihai ic has written on the Adobe Web Platform Team blog about CSS background blend modes now being available in Chrome Canary and WebKit Nightly (opens in new tab).

Using the CSS property background-blend-mode, you can blend background images with an underlying background colour, as specified by the Compositing and Blending Level 1 draft specification released earlier this month. This follows more general canvas blending that landed in Firefox, WebKit and Chrome earlier this year (opens in new tab).

Blend modes will be familiar to anyone who’s worked with layers in a graphics package such as Photoshop, and the draft spec includes 16 blend modes, including multiply, screen and overlay.

The spec is part of a wider attempt to bring more graphical layout richness to web design. Earlier this week we reported on CSS Shapes, which web developer Peter Gasston said would “have quite an impact on the way we work, allowing for more rich, print-influenced layouts”.

CSS Masking Level 1 also made it to draft with co-editors from Adobe, Mozilla and Google. That spec provides the means for partially or fully hiding elements via masking or clipping.

There have also been attempts to bring more magazine-like text controls to the web. But although Adobe’s text-balancing proposal (opens in new tab) went down well, designers have been cautious.

Designer Laura Kalbag recently told .net she “applaud[ed] the effort to make text on the web easier to read,” because “this most important goal is often forgotten in favour of the latest fancy CSS magic”, but she was unconvinced about attempts to replicate some aspects of print design: “Why would we want to replicate a print experience that was created because of the material restrictions — trying to squeeze more words on to less paper — when we don't have the same material restrictions on the web?”

The inference is clear: more power for web designers when it comes to layout control is a good thing, but it should be used to bolster innovation as the web continues to evolve rather than bringing outdated restrictions to a medium that doesn’t need it.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of six full-time members of staff: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.