The Adobe Web Platform team is working on pushing forward what is possible on the web in terms of layout, typography and visual effects. We work together with the W3C, browser vendors and others on specifying and implementing things like advanced typography, 2D and 3D filter effects, magazine style layouts and more.
 
One feature that has been available a long time in graphical tools but not the web is blending. Blending is supported across most graphical design tools and used very often. There are many books on the subject and countless tutorials on the web with tricks and tips to create interesting effects. They are supported in formats like PDF and in tools such as Photoshop. We feel that it makes sense to bring them to the HTML world as well.
 
We drafted a proposal with Canon that describes a couple of simple additions to CSS to add blending to the browser’s rendering model. The specification has been presented to the W3C FX task force as well as the SVG and the CSS working groups. We are going to follow the W3C recommendation track which will result in widespread adoption by the browser vendors.
 
Since we proposed the feature, we’ve received great feedback from the developer and designer communities. They are very familiar with the feature and immediately saw how they can use it to make interesting content.
 
This article will go over how you will be able to specify blending in your web pages alongside some code examples.
 

 
What is blending?

For those of you who are not familiar with the concept, blending determines how a layer can inherit color from the elements that are underneath. At the basic level, you take the color of your element and you mix it with the color that is behind the element. The name of the blend mode specifies the mathematical formula that does the ‘mixing’.
 
Take for instance the following example of two images that are combined with no blending (Figure 1):
 
Figure 1. Two images combined with no blending
Figure 1. Two images combined with no blending
 
As you can see there is no interaction between the two images.
 
Now, if we apply the overlay blend mode to the sun, we get the following result (Figure 2):
 
Figure 1. Applying the ‘overlay’ blend mode
Figure 1. Applying the ‘overlay’ blend mode
 
Notice how the colors of the sun are recalculated so the darkness and lightness of the background image are preserved.
 
If you’re interested how people use this feature to create some amazing artwork, do a web search for ‘Photoshop blending tutorial’ and you will find many articles and YouTube videos.
 

 
How to blend elements on your web page

In this example, we have a simple web page with 3 stylized buttons (Figure 3):
 
Figure 3. Simple web page with 3 stylized buttons
Figure 3. Simple web page with 3 stylized buttons
 
The HTML and CSS would look like:
 
HTML
 
<h2>texturing and blending</h2> <ul id="textured-menu"> <li>Home</li> <li>About</li> <li>Products</li> </ul>
CSS
 
#textured-menu li { width: 200px; height: 200px; padding-top: 65px; text-align: center; border-radius: 100px; margin: 10px; … }
Now we have three buttons on a web page. We like their shape but would really like the texture of the background to come through since that will give a more interesting effect.
 
In today’s world, you have to create an image in program like Photoshop to mimic this effect. Major drawbacks to this approach are increased download time for the user and higher maintenance cost for the client since you would have to redesign this every time there is a change. Also, if the images are resized because of a small screen, the text and outline will become pixelated.
 
With the CSS blending proposal, it will be much simpler to implement this. All you need to do is specify the blend mode on the element where you want to see the effect. In this case, you would add this to the CSS syntax of the button:
 
#textured-menu li { blend-mode: color-burn; }
And you will get the following effect:
 
Figure 4. Adding blend mode to the CSS syntax of the button
Figure 4. Adding blend mode to the CSS syntax of the button
 
The background is now visible through the button. The browser still knows that the button is a span with text so it is rendered with no artifacts and the text is still selectable.
 
The ‘blend-mode’ attribute can be applied to any HTML or SVG element. It will take the complete rendering of this element and blend it with its background.
 
Blending is fully compatible with all other CSS features such as opacity, animations and transitions. For instance if you use a CSS transition on the color in our example:
 
#textured-menu li:hover { background-color: red; transition: background-color 0.15s linear; }
The browser automatically calculates all the intermediate steps during the transition phase.
 
In addition to blend modes to CSS, the proposed specification also adds support for isolated and knockout groups. These are two advanced features that let you precisely control what elements blend with each other.
 

 
How to use blending to improve the look of your drop shadows

Currently, CSS box shadows and text shadows are drawn on top of the background which is not always desired. Alpha can be used to work around this but it will make the drop shadow look washed out and produce artifacts. Authoring applications such as Photoshop give you the ability to blend the shadow because it produces a more pleasing effect.
 
For instance, the following image is a green drop shadow with 75% opacity (Figure 5).
 
Figure 5. Black drop shadow with 75% opacity
Figure 5. Black drop shadow with 75% opacity
 
CSS
 
p { text-shadow: rgba(0,1,0,.75) 20px 54px; }
If we remove the opacity and apply a multiply blend mode, we get the following result (Figure 6):
 
Figure 6. Remove the opacity and apply a multiply blend mode
Figure 6. Remove the opacity and apply a multiply blend mode
 
Notice how the color of the shadow changes depending on the background. This change produces a more natural looking shadow.
 
The CSS would change as follows:
 
CSS
 
p { text-shadow: green 20px 54px; text-shadow-blend-mode: overlay; }
There’s a similar CSS property ‘box-shadow-blend-mode’ that will control how shadows on boxes behave.
 

 
Blending within the CSS box

The CSS box model and the CSS3 background spec define a stack of content and sometimes you want to blend within this stack.
 
For instance, you might want to blend the color of a text element with its background image (Figure 7):
 
Figure 7. Blending the text color with its background image
Figure 7. Blending the text color with its background image
 
There’s a similar CSS property box-shadow-blend-mode that will control how shadows on boxes behave.The CSS syntax would look like the following:
 
CSS
 
p { color: white; foreground-blend-mode: overlay; background-color: hsl(34, 53%, 82%); background-image: … );}
See the CSS3 Patterns Gallery for the full syntax to the background-image property (created by Divya Manian).
 
foreground-blend-mode specifies the blending of the text or nested elements. To specify blending for background images, we introduced background-blend-mode which takes a list of blending modes. Each item in that list corresponds to a background image.
 

 
Where can I apply blending?

The following table describes what CSS keyword controls the blending within the CSS box model:
 
Element
 
CSS Keyword
 
CSS box’s text or children
 
foreground-blend-mode
 
text drop shadow
 
text-shadow-blend-mode
 
CSS box’s background images
 
background-blend-mode
 
CSS box’s shadow
 
box-shadow-blend-mode
 
Complete CSS box
 
blend-mode
 

 
What’s next for CSS blending?

Adobe and Canon brought the proposal to the CSS and SVG working groups and it was accepted by both. This means that the document is now officially a “Working Draft”. This will be reviewed by the web community (which includes you!). Feedback will be incorporated and hopefully we can progress its status to “Candidate Recommendation” soon.
 
At the same time, we are working with the browser vendors to see if they see any major architectural flaws.
 
To study the feasibility we implemented blending in FireFox and Chromium. We feel that our early implementation was good enough for initial experimentation so we posted a private Chromium build. In accordance with common practice, the blending properties in this build are prefixed with “-webkit-“. We encourage you to try it out and see if you like the results.
 
We are looking forward to bringing this technology to the web and can’t wait to see how designers will use it in new and innovative ways.
 

 
Where to go from here

Use the following resources to learn about the latest in CSS blending: