{"id":20,"date":"2020-03-24T11:02:00","date_gmt":"2020-03-24T09:02:00","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=20"},"modified":"2023-08-17T09:22:26","modified_gmt":"2023-08-17T06:22:26","slug":"blend-mode-and-css-filters","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/","title":{"rendered":"Blend Mode and CSS Filters"},"content":{"rendered":"\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Introducing Filter Effects &amp; Blend Modes\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/2X4pR1nOZhE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<hr class=\"wp-block-separator\" \/>\n\n\n\n<p>The <strong>Blend Mode<\/strong> and <strong>CSS Filters<\/strong> allow you to apply Photoshop-like effects to your elements.&nbsp;<br>CSS Filter Effects let you apply graphic effects like blur or color shifting to images.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/new-panel.png\" alt=\"\" class=\"wp-image-2045\" width=\"300\" height=\"752\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/new-panel.png 599w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/new-panel-408x1024.png 408w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<p>Elementor offers 13 blend modes: Normal (this is the default and has zero blend), Multiply, Screen, Overlay, Darken, Lighten, Color Dodge, Saturation, Color, Difference, Exclusion, Hue, and Luminosity. All of them are available in the Style section.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"269\" height=\"664\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/pasted-image-0-3.png\" alt=\"\" class=\"wp-image-2046\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/pasted-image-0-3.png 269w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/pasted-image-0-3-122x300.png 122w\" sizes=\"(max-width: 269px) 100vw, 269px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator\" \/>\n\n\n\n<p><a href=\"https:\/\/elementor.com\/blog\/add-filter-effects-to-images\/\" target=\"_blank\" rel=\"noopener noreferrer\">Read the full post about Blend Mode &amp; CSS Filters on our blog.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how Blend Mode and CSS Filters apply Photoshop-like effects to elements<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["65ba3b9bd4b20262fd09f652"],"footnotes":""},"categories":[1440],"tags":[],"class_list":["post-20","post","type-post","status-publish","format-standard","hentry","category-advanced-functionality"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Blend Mode and CSS Filters | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Blend Mode and CSS Filters in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Blend Mode and CSS Filters | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Blend Mode and CSS Filters in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2020-03-24T09:02:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-17T06:22:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/new-panel.png\" \/>\n\t<meta property=\"og:image:width\" content=\"599\" \/>\n\t<meta property=\"og:image:height\" content=\"1504\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Alan Kaler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alan Kaler\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\"},\"headline\":\"Blend Mode and CSS Filters\",\"datePublished\":\"2020-03-24T09:02:00+00:00\",\"dateModified\":\"2023-08-17T06:22:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/\"},\"wordCount\":92,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/new-panel.png\",\"articleSection\":[\"Advanced functionality\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/\",\"url\":\"https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/\",\"name\":\"Blend Mode and CSS Filters | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/new-panel.png\",\"datePublished\":\"2020-03-24T09:02:00+00:00\",\"dateModified\":\"2023-08-17T06:22:26+00:00\",\"description\":\"Learn everything about Blend Mode and CSS Filters in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/new-panel.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/new-panel.png\",\"width\":599,\"height\":1504},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor Editor\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Widgets\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Advanced functionality\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/advanced-functionality\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Blend Mode and CSS Filters\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/help\/#website\",\"url\":\"https:\/\/elementor.com\/help\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/help\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/help\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/help\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\",\"name\":\"Alan Kaler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"caption\":\"Alan Kaler\"},\"description\":\"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Blend Mode and CSS Filters | Elementor","description":"Learn everything about Blend Mode and CSS Filters in this article from Elementor's Knowledge Base. Get Elementor tips & more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/","og_locale":"en_US","og_type":"article","og_title":"Blend Mode and CSS Filters | Elementor","og_description":"Learn everything about Blend Mode and CSS Filters in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/","og_site_name":"Help","article_published_time":"2020-03-24T09:02:00+00:00","article_modified_time":"2023-08-17T06:22:26+00:00","og_image":[{"width":599,"height":1504,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/new-panel.png","type":"image\/png"}],"author":"Alan Kaler","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alan Kaler"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430"},"headline":"Blend Mode and CSS Filters","datePublished":"2020-03-24T09:02:00+00:00","dateModified":"2023-08-17T06:22:26+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/"},"wordCount":92,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/new-panel.png","articleSection":["Advanced functionality"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/","url":"https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/","name":"Blend Mode and CSS Filters | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/new-panel.png","datePublished":"2020-03-24T09:02:00+00:00","dateModified":"2023-08-17T06:22:26+00:00","description":"Learn everything about Blend Mode and CSS Filters in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/new-panel.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/new-panel.png","width":599,"height":1504},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Elementor Editor","item":"https:\/\/elementor.com\/help\/elementor-editor\/"},{"@type":"ListItem","position":3,"name":"Widgets","item":"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/"},{"@type":"ListItem","position":4,"name":"Advanced functionality","item":"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/advanced-functionality\/"},{"@type":"ListItem","position":5,"name":"Blend Mode and CSS Filters"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430","name":"Alan Kaler","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","caption":"Alan Kaler"},"description":"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/20\/revisions"}],"predecessor-version":[{"id":38314,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/20\/revisions\/38314"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=20"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=20"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}