Modern CSS provides an incredible opportunity to create innovative, engaging user interfaces and experiences, but many well-supported properties are still rarely used to their full artistic and technical potential.
One of the most useful but still underutilized properties today is mix-blend-mode. This property allows elements to be blended together by dictating how blending should appear between stacked HTML elements by blending elements from layers above with those behind them.
Even after close to five years of initial support inside Chrome and many modern browsers for so many emerging methods in CSS, there still isn’t enough use of blend modes in general especially where it could be adding significant value to UX. I believe this is partly due to lack of:
- Knowledge around implementation for newer CSS properties
- Buy-in from stakeholders needed to leverage creative opportunities
- Sensible progressive enhancement examples
So I set out to use both SVG and mix-blend-mode to solve each of these three problems in a demo for an essential part of any website UI: the navigation.
What does mix-blend-mode solve for?
When considering the overall UX of a navigation component for a website or app contrast is usually of central importance to ensure the menu is instantly recognizable and accessible. This is especially true for the most recent trend in fixed, minimalist and “transparent” navigation styles.
Applying mix-blend-mode: difference to a single, fixed SVG icon for primary navigation solves for the problem of contrast over any background media that might scroll beneath the component. The CSS applies dynamic coloring to an SVG icon inside a transparent fixed container to ensure it always has the best contrast over any possible background. As a result the UI provides users with a minimal yet highly effective primary navigation component that’s always within reach without being too distracting.
View the full effect of this implementation by scrolling up and down this page or on any other page or post on this site–like the front page or other blog posts on this site, then get started on building it yourself below. You can also skip ahead to the complete demo and source to view the finished result.
By providing you with both the quickly implemented fallback code and the reasoning for the progressive enhancement in this example, I hope I can save you some time as you and your team apply this gorgeous and fully supported across browsers for UI contrast throughout your work.
Getting started
In this demo we’re building a UI component that scrolls well over any type of background media including photography, illustrations and typography.
This example also includes a progressively enhanced fallback to fix lack of support for mix-blend-mode in Microsoft IE & Edge.
Prerequisites
- Basic knowledge of HTML, CSS and UI design
Goals
- Create a fixed UI element with SVG and
mix-blend-mode: difference for primary navigation - (Optional) Apply this property alongside other effects like subtle animation
How I use this
While redesigning this site recently it quickly became clear that a single dark, fixed icon for primary navigation wouldn’t have enough contrast when scrolling over many of the areas I designed with darker backgrounds. The icon didn’t just hurt overall user experience (UX) it also seriously affected accessibility too.
Instead of applying the standard sticky header and solid background coloring that’s so ubiquities in cooky-cutter commercial web design for the last five years to today I decided to apply an innovative approach so I could stick with a minimalist, transparent header.
After experimenting with mix-blend-modes, SVG and animation I was able to code a component that was gorgeous, performant, and easily extendible with some subtle animation. The final result allows a single standout icon to command the UX in a minimalist style. It rejects the need for a transitioning, sticky header which can add distraction from gratuitous scroll down animations and a cluttered top of the screen. Instead, this example ensures the top of the viewport can remain fully “transparent” in relation to the content or calls to action scrolling behind it on all parts of the screen.
Apply mix-blend-mode to navigation with SVG
The difference property provides excellent contrast over a variety of background media like photos, gradients and more, but you can also experiment with other mix-blend-mode property values to see what works best for you.
Add the HTML
To keep this post as short as possible the full HTML for this example isn’t copied below. Instead, please check the complete source code on Codepen for a copy.
For this example I’ve written some semantic HTML using an inline SVG menu icon inside a <button> element which adds better accessibility than a link element for something like a primary UI button.
Your inline SVG icon must have a fill color of white or another very light color to correctly apply mix-blend-mode so that it has full contrast with your background. If your icon is black, it will disappear from view when this CSS property is applied. Luckily this is easily modifiable with the fill="" attribute for inline SVGs and feel free to use the icon found in this example if you need one.
Add the CSS
After your HTML is ready apply mix-blend-mode: difference to your button and position your SVG icon in the top right corner of the screen to use it as primary navigation.
button {
max-width: 50px;
width: 100px;
position: fixed;
background: none;
border: none;
padding: 0;
top: 30px;
right: 40px;
mix-blend-mode: difference;
}
svg {
position: absolute;
top: 0;
right: 0;
}
An issue in Chrome 58+ causes mix-blend-mode to not render on elements that are set on a transparent <body>. Until the bug is fixed, the workaround is to assign a color or white background color to the body element or to place the element with mix-blend-mode applied inside a separate container element.
If you’re only looking to support modern browsers then you’re done and that’s it! View the full demo and source code to break down any part of this example for further detail.
However, if Microsoft IE and Edge browser support are a requirement for your project then continue reading for an elegant fallback solution used on this site and many others.
Fallback for mix-blend-mode in IE & Edge
Browser support for mix-blend-mode is missing from Edge, IE, and a few other smaller browsers as explained on caniuse.com. This means we need to display our SVG icon without mix-blend-mode for browsers that don’t support it. The problem is that the implementation above combines an inline SVG with a white fill with this CSS property leaving users with browsers that do not support it with a button that’s just white essentially broken over any light background.
To fix that we’ll apply a browser fallback to make the icon black without any blend mode effects for Microsoft IE & Edge only. This elegant workaround toggles display of two inline versions of the same SVG button dependent on browser.
Modern browsers that support the property will display the original light SVG button and older older browsers that don’t support the property will toggle to display a dark version of the SVG button instead.
The black icon a graceful fallback that adds minimal added lines of code, provides good contrast over most backgrounds for the SVG element, and is already popular for this style of navigation today. The compromise of a few more lines of code is a great tradeoff to start using innovative CSS properties that for the majority of users with modern browsers today.
Nonetheless, you’ll want to carefully consider your target customers and personas before you decide what makes sense for your users and how to approach this type of UI and apply the fall back styling. Currently mix-blend-mode is at about 80% support of all desktop users and 74% of all mobile users.
In partnership with Microsoft BrowserStack provides free testing for Microsoft Edge. If you have an account, click on “Continue testing on Microsoft Edge and Firefox for free,” on the bottom of the testing page to continue testing without a paid account.
If you’d prefer a non-CSS fallback solution, you can consider a JavaScript polyfill or another fallback for mix-blend-mode especially in navigation, but these tend to actually be more costly for performance and speed and are not as easy to animate as the CSS in this example.
Create the second, black inline SVG
Duplicate your inline SVG below the existing one and change its fill color to black using fill="#000". Apply the class names light-svg and dark-svg to each inline SVG element depending on its fill color.
You can use a color other than black as your fallback but I think it’s the best compromise for most sites and layouts. Black or especially dark icons are also already the current standard for this type of minimalist, fixed, transparent navigation so users are already familiar with their appearance in many ways.
You may be tempted to try using only a single SVG that’s black by default by selectively applying the filter property to make it white for the purposes of using mix-blend-mode: difference only in browsers that support it. However, this idea relies on the idea that both mix-blend-mode and filter will fail at the same which is not true for any browser and will leave your users with a broken and half-modified icon.
Add prefixes and fallbacks for IE & Edge only
Add display properties for the two SVG classes below the CSS from above that sets display of the menu for modern browsers.
.light-svg {
display: block;
}
.dark-svg {
display: none;
}
Then add the browser prefixes and CSS below to change the classes for Micorosoft IE & Edge only.
Because they do support mix-blend-mode we’re going to switch out the white SVG icon and replace it with the black version of the icon we duplicated above with the help of a simple browser prefix in our CSS.
_:-ms-lang(x), .light-svg {
display: none;
}
_:-ms-lang(x), .dark-svg {
display: block;
}
The prefix above applies the CSS to Microsoft Edge & IE only.
To see a complete break-down of this code in action, including the corresponding HTML, please reference the demo.
The cascade
It’s important to place the fallback solution from above after the initial, default CSS to ensure the cascade is applied correctly.
If you place the fallback code above the original CSS, then IE and Edge will ignore the fallback code and would incorrectly display a broken mix-blend-mode effect.
What comes after the current version of Edge?
With a recent announcement by Microsoft announced the end of the current Edge browser in favor of a new Chromium-based browser the potentiality for mix-blend-modes ever being fixed in Edge is lost.
Regardless of support for this property and modern CSS in the upcoming Chromium browser, web developers must use fallbacks if they want to continue to build products for as many people as possible.
Update: The Verge recently shared a first peek at the new Chromium based browser from Microsoft, and shared some of the great features and compatibility it shares with Google’s Chrome browser.
Performance & speed
This method is less resource intensive than a similar–but not identical–implementation with SVG filters or JavaScript might require. This implementation is also especially performant because we’re using this CSS on one or two small inline SVG elements in an isolated area of the UI.
If you find a bottleneck somewhere during optimization and testing later on it’s likely to do with the complexity of what’s behind the mix-blend-mode icon rather than the filter itself.
Additional possibilities
Before the arrival of modern CSS unique or advanced graphical manipulation techniques were limited to pre-development processing of graphics in Photoshop. This requires a long amount of time spent on and in between editing each image individually. Today we can batch and achieve the same visual effects in Photoshop instantly with just a few lines of code thanks to the computational value of modern CSS.
This type of CSS property is also great for elements on your page that aren’t part of your primary navigation or user interface. It works really well for text or even an SVG logo in the same style. I would suggest developing a maximum of two icons plus a logo for an effective result. If your site has huge blocks of text meant for your users to easily read, then you might want to forgo a fixed logo. But if your application is more focused on non-text elements–for example, like a very modern eCommerce store–a fixed logo might make more sense.
See the Pen
Relax with mix blend mode #codevember_16 by Robin Savemark (@robinsavemark)
on CodePen.
To answer these questions for yourself take into consideration the overall purpose of your UX and UI to your users and make the tradeoff based on their needs and actual historical use of your app.
Other areas where this type of visual effect might work great within a UI component are for less-intrusive modals, slide-ins, and many other reusable blocks of code.
Filter effects
Filter effects are similar yet uniquely different from blend modes in CSS. SVG filters are also yet another option which can be computationally more expensive than their CSS counterparts.
I’ll provide further examples in upcoming posts related to this demo but in the meantime here is a reference for some of the great work of Sara Soudien on SVG filters:
Involve designers throughout development
One way to really leverage the value of mix-blend-mode in your organization is to have engineers, designers, and product managers come together to consistently provide a seat at the table to everyone involved throughout the process.
By empowering developers to make design decisions and designers to make development predictions and decisions we can create better software overall. By encouraging designers to think consider front-end engineering tradeoffs as early as possible, especially around browser support and high-level decisions about overall UX, we can ship products faster and at a higher-quality.
Conclusion
To start working with this code and see it in action use the demo on Codepen.
Be sure to view the demo in a modern browser that supports mix-blend-mode. For testing in Microsoft IE & Edge try out the free option for BrowserStack.
The component detailed in this demo is also used on the current version of this website! Check out any page or post–like the front page or other blog posts–to see it in action and get a feel for the overall effect.
See the Pen
CSS mix blend mode & SVG for dynamically colored, fixed UI navigation with fallback for IE & Edge by Lara Littlefield (@laralfield)
on CodePen.
Resources
Try out these great resources for even more creative examples and inspiration for mix-blend-mode in component engineering and beyond.
