{"id":200237,"date":"2015-04-12T07:49:26","date_gmt":"2015-04-12T14:49:26","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=200237"},"modified":"2020-10-21T08:47:59","modified_gmt":"2020-10-21T15:47:59","slug":"mix-blend-mode","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mix-blend-mode\/","title":{"rendered":"mix-blend-mode"},"content":{"rendered":"\n<p>The <code>mix-blend-mode<\/code> property defines how an element\u2019s content should blend with its background. For example, the text of a <code>&lt;h1><\/code> could blend with the background behind it in interesting ways.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.blend {\n  mix-blend-mode: exclusion;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ogrMQx\" src=\"\/\/codepen.io\/anon\/embed\/ogrMQx?height=450&amp;theme-id=1&amp;slug-hash=ogrMQx&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ogrMQx\" title=\"CodePen Embed ogrMQx\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>In the example above the content has been modified&nbsp;by the <code>mix-blend-mode<\/code> so that the colors of the text are excluded from its background. This is just one of many values for this property.<\/p>\n\n\n\n<p class=\"explanation\">There is an issue with Chrome 58+ where <code>mix-blend-mode<\/code> will not render on elements that are set on a transparent <code><\/code>. The has been ticketed as <a href=\"https:\/\/bugs.chromium.org\/p\/chromium\/issues\/detail?id=711955&amp;q=mix-blend-mode&amp;colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified\" rel=\"noopener\">Issue 711955<\/a> in Chrome, which is assigned at the time of this writing. In the meantime, a simple fix is to assign a white (or really, any) background color to the body element.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"values\">Values<\/h3>\n\n\n<ul><li><code>initial<\/code>: the default setting of the property that does not set a blend mode.<\/li><li><code>inherit<\/code>: an element will inherit the blend mode from its parent element.<\/li><li><code>unset<\/code>: removes the current blend mode from an element.<\/li><li><code>&lt;blend-mode&gt;<\/code>: this is the attribute of one of the blend modes beneath:<\/li><li><code>normal<\/code>: this attribute applies no blending whatsoever.<\/li><li><code>multiply<\/code>: the element is multiplied by the background and replaces the background color. The resulting color is always as dark as the background.<\/li><li><code>screen<\/code>: multiplies the background and the content then complements the result. This will result in content which is brighter than the <code>background-color<\/code>.<\/li><li>overlay: multiplies or screens the content depending on the background color. This is the inverse of the hard-light blend mode.<\/li><li>darken: the background is replaced with the content where the content is darker, otherwise, it is left as it was.<\/li><li><code>lighten<\/code>: the background is replaced with the content where the content is lighter.<\/li><li><code>color-dodge<\/code>: this attribute brightens the background color to reflect the color of the content.<\/li><li><code>color-burn<\/code>: this darkens the background to reflect the content\u2019s natural color.<\/li><li><code>hard-light<\/code>: depending on the color of the content this attribute will screen or multiply it.<\/li><li><code>soft-light<\/code>: depending on the color of the content this will darken or lighten it.<\/li><li><code>difference<\/code>: this subtracts the darker of the two colors from the lightest color.<\/li><li><code>exclusion<\/code>: similar to <code>difference<\/code> but with lower contrast.<\/li><li><code>hue<\/code>: creates a color with the hue of the content combined with the saturation and luminosity of the background.<\/li><li><code>saturation<\/code>: creates a color with the saturation of the content combined with the hue and luminosity of the background.<\/li><li><code>color<\/code>: creates a color with the hue and saturation of the content and the luminosity of the background.<\/li><li><code>luminosity<\/code>: creates a color with the luminosity of the content and the hue and saturation of the background. This is the inverse of the <code>color<\/code> attribute.<\/li><\/ul>\n\n\n\n<p>It\u2019s worth noting that setting a blend mode other than <code>normal<\/code> will generate a new stacking context which must then be blended with the stacking context that contains the element.<\/p>\n\n\n\n<p>The effect of these values are shown in the demo below:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZYdjmZ\" src=\"\/\/codepen.io\/anon\/embed\/ZYdjmZ?height=450&amp;theme-id=1&amp;slug-hash=ZYdjmZ&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZYdjmZ\" title=\"CodePen Embed ZYdjmZ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzWpPLy\" src=\"\/\/codepen.io\/anon\/embed\/YzWpPLy?height=450&amp;theme-id=1&amp;slug-hash=YzWpPLy&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzWpPLy\" title=\"CodePen Embed YzWpPLy\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"related-properties\">Related properties<\/h3>\n\n\n<ul><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/i\/isolation\/\">isolation<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/o\/opacity\/\">opacity<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-blend-mode\/\">background-blend-mode<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More information<\/h3>\n\n\n<ul><li><a href=\"https:\/\/css-tricks.com\/basics-css-blend-modes\/\">Basics of CSS Blend modes<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/mix-blend-mode\" rel=\"noopener\">mix-blend-mode on MDN<\/a><\/li><li><a href=\"http:\/\/www.w3.org\/TR\/compositing-1\/#mix-blend-mode\" rel=\"noopener\">mix-blend-mode on W3C<\/a><\/li><li><a href=\"http:\/\/codepen.io\/collection\/Kgshi\/\" rel=\"noopener\">A collection of CSS Blend Mode demos<\/a><\/li><li><a href=\"https:\/\/dev.opera.com\/articles\/getting-to-know-css-blend-modes\/\" rel=\"noopener\">Getting to know CSS Blend Modes<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser Support<\/h3>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=\u201ccss-mixblendmode\u201d\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">41<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">32<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">79<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">TP<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">125<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">17.5<\/span><\/td><\/tr><\/table><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The mix-blend-mode property defines how an element\u2019s content should blend with its background. For example, the text of a &lt;h1> could blend with the background behind it in interesting ways. In the example above the content has been modified&nbsp;by the mix-blend-mode so that the colors of the text are excluded from its background. This is [&hellip;]<\/p>\n","protected":false},"author":223806,"featured_media":0,"parent":13935,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[1552,1551],"acf":[],"jetpack-related-posts":[{"id":205736,"url":"https:\/\/css-tricks.com\/almanac\/properties\/i\/isolation\/","url_meta":{"origin":200237,"position":0},"title":"isolation","date":"July 29, 2015","format":false,"excerpt":"The isolation property in CSS is used to prevent elements from blending with their backdrops. .module { isolation: isolate; } It is most commonly used when mix-blend-mode has been declared on another element. Applying isolation to the element guards that element so that it does not inherit the mix-blend-mode applied\u2026","rel":"","context":"With 4 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":373770,"url":"https:\/\/css-tricks.com\/snippets\/css\/image-illustration-filter\/","url_meta":{"origin":200237,"position":1},"title":"Image Illustration Filter","date":"September 27, 2022","format":false,"excerpt":"I like that sorta effect where an image almost looks like it's an oil painting or an illustration made with a thick, runny ink fountain pen. I got the idea when Scott Vandehey shared his \"halftone filter\" effect on the Cloud Four blog. I'd say it looks a lot like\u2026","rel":"","context":"In \"background-image\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/Screen-Shot-2022-09-23-at-3.34.46-PM.png?fit=1200%2C764&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":199429,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-blend-mode\/","url_meta":{"origin":200237,"position":2},"title":"background-blend-mode","date":"April 6, 2015","format":false,"excerpt":"The background-blend-mode property defines how an element's background-image should blend with its background-color: .container { background-image: url('image.jpg'); background-color: red; background-blend-mode: screen; } CodePen Embed Fallback In the demo above, the default background-image on the left has no blend mode set and so the image overlaps the background-color. On the right\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":243681,"url":"https:\/\/css-tricks.com\/snippets\/css\/monotone-image-css\/","url_meta":{"origin":200237,"position":3},"title":"Monotone an Image with CSS","date":"July 18, 2016","format":false,"excerpt":"You can always apply a filter to an element to make it monotone in the grayscale sense: See the Pen Monotone-ing an Image by Chris Coyier (@chriscoyier) on CodePen. If you put that in a container with a background color and lower the opacity, you can get a colored monotone\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18323,"url":"https:\/\/css-tricks.com\/lodge\/v10\/048-building-the-poll-module-part-2\/","url_meta":{"origin":200237,"position":4},"title":"#048: Building the Poll Module, Part 2","date":"September 17, 2012","format":false,"excerpt":"We left off with a totally decent poll widget. The typography is clean and everything perfectly usable. However, it wasn't exactly compelling or fun. We quickly look at the multicolor area of the Gallery as a bit of inspiration for what might make a fun background for the Polls module.\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14283,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/v\/visited\/","url_meta":{"origin":200237,"position":5},"title":":visited","date":"September 6, 2011","format":false,"excerpt":"The:visited pseudo-class selector can change some of the styling on an anchor link (<a>) element if the user's browser has already visited the link. It's meant to help users distinguish the difference between links they have and haven't visited. a:visited { color: gray; } Limitations and usage There is some\u2026","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/200237"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=200237"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/200237\/revisions"}],"predecessor-version":[{"id":324083,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/200237\/revisions\/324083"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13935"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=200237"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=200237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}