Jump to main navigation, main content

Archived entry | Matt Wilcox .net

CSS3 wish-list: blending modes

We can do some nice stuff in CSS these days, hurrah for opacity, rgba, box-shadow and the gang. It’s still pretty limiting in some ways though, and I’ve often craved for blending modes, like we use in Photoshop. There have been a number of times over the last few years where I’ve been handed a visual design to implement as a website, and found it impossible because the design in question would need CSS to have Blending Modes. So I’ve been thinking about how that’d need to be implemented, and I think it’d have to be as part of the CSS Colour Module, as well as having a stand-alone property. Here are my use-cases with expected syntax:

Blend a whole element

img { blending-mode: multiply; }

This would be nice, but proberbly not used all that often. It’d work well for image effects or headings, but it’d be pretty useless on things like image captions - you’d still want th text to be readable which means you proberbly don’t want written content to have a blending mode applied unless you can be sure the underlying image will be suitable.

Blend parts of an element

div { background-color : rgba(0,0,0,.5) multiply; border: 3px solid rgba(255,255,255,.5) screen; color : #fff; }

Basically, wherever you specify a colour or an image, you should be able to specify a blending mode to apply too. In this case, we want the div’s background to multiply but we want the div’s border to screen so that it pops out visually. You could imagine the same context revesed for headings:

h2 { text-shadow : rgba(0,0,0,.5) multiply; color: rgba(255,255,255,.5) screen; }

Where the shadow multiplies (today’s shadows can sometimes be lighter than the background they’re on!) but the text screens (ensuring it’s brighter than whatever is behind it).

Note: this post is really old (five or six months old) and I never published it. I still like the idea, but I am aware that blending modes have now been suggested by Adobe. I don’t know if they’re as fine-tuned as this or not - I’ve not seen the spec yet.


skip to comment form
  1. Rik Cabanier posted 123 days, 14hrs, 29mins after the entry and said:

    We've introduced a draft spec that proposes this.
    Please let us know if it looks reasonable. We're looking for feedback.

From the archives

Other enteries filed under:

Web Development

Site information

Built with valid XHTML and CSS, designed with web standards and accessibility in mind. Best viewed in a modern browser [Firefox, Safari, Opera]

This domain and all content is a copy of my old website, for historical purposes only.