{"id":199429,"date":"2015-04-06T14:38:42","date_gmt":"2015-04-06T21:38:42","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=199429"},"modified":"2021-05-20T09:34:31","modified_gmt":"2021-05-20T16:34:31","slug":"background-blend-mode","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-blend-mode\/","title":{"rendered":"background-blend-mode"},"content":{"rendered":"\n<p>The <code>background-blend-mode<\/code> property defines how an element&#8217;s <code>background-image<\/code> should blend with its <code>background-color<\/code>:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.container {\n  background-image: url('image.jpg');\n  background-color: red;\n  background-blend-mode: screen;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_qEGXVp\" src=\"\/\/codepen.io\/anon\/embed\/qEGXVp?height=450&amp;theme-id=1&amp;slug-hash=qEGXVp&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed qEGXVp\" title=\"CodePen Embed qEGXVp\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>In the demo above, the default <code>background-image<\/code> on the left has no blend mode set and so the image overlaps the <code>background-color<\/code>. On the right however, the blend mode has modified the <code>background-image<\/code> with the red <code>background-color<\/code> underneath. But notice that the text color has <em>not<\/em> been affected by this additional property.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"property-values\">Values<\/h3>\n\n\n<ul><li><code>initial<\/code>: the default value with no blending.<\/li><li><code>inherit<\/code>: inherits the blend mode of the parent element.<\/li><li><code>&lt;blend-mode><\/code>: a value that will change the background-image depending on its <code>background-color<\/code>.<\/li><\/ul>\n\n\n\n<p>The <code><\/code> value can be set as any of the following (in the demos below the <code>background-color<\/code> is red):<\/p>\n\n\n\n<figure class=\"wp-block-image align-none media-199430\" id=\"post-199430\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/04\/normal.png\" alt=\"\" data-recalc-dims=\"1\"\/><figcaption><code>normal<\/code>: as shown above, the background-color will not bleed through the background-image.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image align-none media-199432\" id=\"post-199432\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/04\/multiply.png\" alt=\"\" data-recalc-dims=\"1\"\/><figcaption><code>multiply<\/code>: the background-image and background-color are multiplied and typically this leads to a darker image than before.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image align-none media-199511\" id=\"post-199511\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/04\/screen.jpg\" alt=\"\" data-recalc-dims=\"1\"\/><figcaption><code>screen<\/code>: both image and color is inverted, multiplied and then inverted again.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image align-none media-199509\" id=\"post-199509\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/04\/overlay.png\" alt=\"\" data-recalc-dims=\"1\"\/><figcaption><code>overlay<\/code>: the background-color is mixed with the background-image to reflect the lightness or darkness of the backdrop.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image align-none media-199513\" id=\"post-199513\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/04\/darken.png\" alt=\"\" data-recalc-dims=\"1\"\/><figcaption><code>darken<\/code>: if the background-image is darker than the background-color then the image is replaced, otherwise it is left as it was.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image align-none media-199514\" id=\"post-199514\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/04\/lighten.png\" alt=\"\" data-recalc-dims=\"1\"\/><figcaption><code>lighten<\/code>: if the background-image is lighter than the background-color then the image is replaced, otherwise it is left as it was.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image align-none media-199515\" id=\"post-199515\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/04\/color-dodge.png\" alt=\"\" data-recalc-dims=\"1\"\/><figcaption><code>color-dodge<\/code>: the background-color is divided by the inverse of the background-image. This is very similar to the screen blend mode.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image align-none media-199516\" id=\"post-199516\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/04\/color-burn.png\" alt=\"\" data-recalc-dims=\"1\"\/><figcaption><code>color-burn<\/code>: the background-color is inverted, divided by the background-image and inverted again. This is similar to multiply.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image align-none media-199517\" id=\"post-199517\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/04\/hard-light.png\" alt=\"\" data-recalc-dims=\"1\"\/><figcaption><code>hard-light<\/code>: if the background-image is lighter than the background-color then the result is muliply or if it is lighter then the result is screen.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image align-none media-199522\" id=\"post-199522\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/04\/soft-light.png\" alt=\"\" data-recalc-dims=\"1\"\/><figcaption><code>soft-light<\/code>: the final result is similar to <code>hard-light<\/code> but softer in that it looks like a diffused spotlight has been placed on the image.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image align-none media-199523\" id=\"post-199523\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/04\/difference.png\" alt=\"\" data-recalc-dims=\"1\"\/><figcaption><code>difference<\/code>: the result by subtracting the darker color of the background-image and the background-color from the lightest one. Often the image will have a very high contrast.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image align-none media-199524\" id=\"post-199524\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/04\/exclusion.png\" alt=\"\" data-recalc-dims=\"1\"\/><figcaption><code>exclusion<\/code>: the result is very similar to <code>difference<\/code> yet with a little lower contrast.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image align-none media-199525\" id=\"post-199525\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/04\/hue.png\" alt=\"\" data-recalc-dims=\"1\"\/><figcaption><code>hue<\/code>: the result is the hue of the background-image combined with the luminosity and saturation of the background-color.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image align-none media-199526\" id=\"post-199526\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/04\/saturation.png\" alt=\"\" data-recalc-dims=\"1\"\/><figcaption><code>saturation<\/code>: keeps the saturation of the background-image whilst mixing the hue and luminosity of the background-color.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image align-none media-199527\" id=\"post-199527\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/04\/color.png\" alt=\"\" data-recalc-dims=\"1\"\/><figcaption><code>color<\/code>: keeps hue and saturation of background-image and the luminosity of the background-color. In this example because the image is gray and the effect preserves gray levels all we get is a big gray blob.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image align-none media-199528\" id=\"post-199528\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/04\/luminosity.png\" alt=\"\" data-recalc-dims=\"1\"\/><figcaption><code>luminosity<\/code>: luminosity of the top color is preserved whilst using the saturation and hue of the background-color.<\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"chaining-multiple-blend-modes\">Chaining multiple blend modes<\/h3>\n\n\n<p>Each background layer can only have a single blend mode, however if we\u2019re using multiple linear gradients for instance, each of them can have their own blend mode which makes for an interesting display:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_jEoLYP\" src=\"\/\/codepen.io\/anon\/embed\/jEoLYP?height=450&amp;theme-id=1&amp;slug-hash=jEoLYP&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed jEoLYP\" title=\"CodePen Embed jEoLYP\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p><script async=\"\" src=\"\/\/assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<p>This is achieved by listing these values in order of the background layer that you\u2019d like to effect:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.container {\n  background: \n    linear-gradient(purple 0%, red 90%), \n    linear-gradient(to right, purple 0%, yellow 90%), \n    url('image.jpg') 30px,\n    url('image.jpg') 20px;\n  background-blend-mode: screen, difference, lighten;\n}<\/code><\/pre>\n\n\n\n<p>The first linear gradient has the <code>screen<\/code> blend mode, followed by the second linear gradient which has <code>difference<\/code> and the first background image which has <code>lighten<\/code> applied to it.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"example-demo\">Demo<\/h3>\n\n\n<p>Here\u2019s a working example of how those values are interpreted depending on the <code>background-color<\/code>:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GgavOP\" src=\"\/\/codepen.io\/anon\/embed\/GgavOP?height=450&amp;theme-id=1&amp;slug-hash=GgavOP&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GgavOP\" title=\"CodePen Embed GgavOP\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\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=css-backgroundblendmode\" 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\">35<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">30<\/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=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">10.1<\/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=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">10.3<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More information<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card article\" id=\"mini-post-199429\">\n\n  <time datetime=\"2014-02-28\" title=\"Originally published Apr 6, 2015\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jul 10, 2017  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/basics-css-blend-modes\/\">\n      Basics of CSS Blend Modes    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-199429\">\n\n  <time datetime=\"2015-04-24\" title=\"Originally published Apr 6, 2015\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Apr 24, 2015  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/chaining-multiple-blend-modes\/\">\n      Chaining Multiple Blend Modes    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/robinrendle\/\" aria-label=\"Author page of Robin Rendle\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/me-black-white.jpg?resize=80%2C80&#038;ssl=1\" width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/robinrendle\/\">\n      Robin Rendle    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-199429\">\n\n  <time datetime=\"2021-03-22\" title=\"Originally published Apr 6, 2015\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Mar 22, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/taming-blend-modes-difference-and-exclusion\/\">\n      Taming Blend Modes: `difference` and `exclusion`    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/thebabydino\/\" aria-label=\"Author page of Ana Tudor\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/bee436794e066a5423040cf673c7506f?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/bee436794e066a5423040cf673c7506f?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/thebabydino\/\">\n      Ana Tudor    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n\n\n<h3 class=\"wp-block-heading\" id=\"related-properties\">Related properties<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card \" id=\"mini-post-199429\">\n\n  <time datetime=\"2011-08-31\" title=\"Originally published Apr 6, 2015\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    May 20, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background\/\">\n      background    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { background: url(texture.svg) top center \/ 200px 200px no-repeat fixed #f8a100; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/saracope\/\" aria-label=\"Author page of Sara Cope\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/saracope\/\">\n      Sara Cope    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-199429\">\n\n  <time datetime=\"2015-02-17\" title=\"Originally published Apr 6, 2015\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Sep 28, 2022  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-image\/\">\n      background-image    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-image\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { background: url(texture.svg); }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-199429\">\n\n  <time datetime=\"2011-09-05\" title=\"Originally published Apr 6, 2015\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Feb 23, 2016  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/o\/opacity\/\">\n      opacity    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/o\/opacity\/\" class=\"almanac-example\">\n      <code class=\"language-css\"><\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/saracope\/\" aria-label=\"Author page of Sara Cope\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/saracope\/\">\n      Sara Cope    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-199429\">\n\n  <time datetime=\"2015-04-12\" title=\"Originally published Apr 6, 2015\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Oct 21, 2020  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/mix-blend-mode\/\">\n      mix-blend-mode    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/mix-blend-mode\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.blend { mix-blend-mode: exclusion; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/robinrendle\/\" aria-label=\"Author page of Robin Rendle\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/me-black-white.jpg?resize=80%2C80&#038;ssl=1\" width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/robinrendle\/\">\n      Robin Rendle    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"<p>The background-blend-mode property defines how an element&#8217;s background-image should blend with its background-color: 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 however, the blend mode has modified the background-image with the red background-color underneath. But notice that the [&hellip;]<\/p>\n","protected":false},"author":223806,"featured_media":0,"parent":13913,"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":[],"acf":[],"jetpack-related-posts":[{"id":200237,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mix-blend-mode\/","url_meta":{"origin":199429,"position":0},"title":"mix-blend-mode","date":"April 12, 2015","format":false,"excerpt":"The mix-blend-mode property defines how an element\u2019s content should blend with its background. For example, the text of a <h1> could blend with the background behind it in interesting ways. .blend { mix-blend-mode: exclusion; } CodePen Embed Fallback In the example above the content has been modified\u00a0by the mix-blend-mode so\u2026","rel":"","context":"In \"mix-blend-mode\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":373770,"url":"https:\/\/css-tricks.com\/snippets\/css\/image-illustration-filter\/","url_meta":{"origin":199429,"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":205736,"url":"https:\/\/css-tricks.com\/almanac\/properties\/i\/isolation\/","url_meta":{"origin":199429,"position":2},"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":14283,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/v\/visited\/","url_meta":{"origin":199429,"position":3},"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":[]},{"id":18323,"url":"https:\/\/css-tricks.com\/lodge\/v10\/048-building-the-poll-module-part-2\/","url_meta":{"origin":199429,"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":243681,"url":"https:\/\/css-tricks.com\/snippets\/css\/monotone-image-css\/","url_meta":{"origin":199429,"position":5},"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":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/199429"}],"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=199429"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/199429\/revisions"}],"predecessor-version":[{"id":341054,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/199429\/revisions\/341054"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13913"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=199429"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=199429"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}