Full stack web developer, interested in all the things, but especially the web, code, design, Linux, OS X, PHP, WordPress, JavaScript & robots.

Blending Modes Demystified image/svg+xml

One of the latest capabilities to fall into the hands of web designers is image processing with blending modes. Blending modes allow us to easily create colorization and texturization and apply other special effects without having to crack open an image editor. This saves time by not having to manually reprocess graphics whenever a change is needed, and prevents the headache of having to recall the exact settings of a visual standard that may have been created months earlier. Instead, graphics can be neatly specified, maintained, and manipulated with a few CSS declarations.

I really like that it’s now possible to use image blending modes with CSS. The only problem is:

Blending modes are supported in most major browsers, except Internet Explorer and Edge. The silver lining is that Microsoft lists the properties as “under consideration” for Edge, and that browser does already support all of these blend modes in SVG, so one can hope for a speedy implementation.

With Windows 10 now installed on over 200 million devices, a speedy implementation would be good.

Leave a comment

Your email address will not be published. Required fields are marked *