{"id":11138,"date":"2022-12-29T17:13:20","date_gmt":"2022-12-30T00:13:20","guid":{"rendered":"https:\/\/www.elegantthemes.com\/documentation\/?p=11138"},"modified":"2023-02-03T15:51:26","modified_gmt":"2023-02-03T22:51:26","slug":"filter-and-blend-mode-options","status":"publish","type":"post","link":"https:\/\/www.elegantthemes.com\/documentation\/divi\/filter-and-blend-mode-options\/","title":{"rendered":"Using Divi Filter and Blend Mode Options"},"content":{"rendered":"<p>The Divi Filter and Blend Mode options give you the power to make all kinds of color adjustments to design elements in Divi. It includes 16 unique blending effects that you can apply to any Divi element! In this document, we&#8217;ll explore how to use the Filter and Blend Mode options to modify your designs in unique ways.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/filter-examples.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/filter-examples.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<p><a class=\"button primary-button inline-button\" href=\"https:\/\/www.elegantthemes.com\/preview\/Divi\/filters\/\">View Filter Examples<\/a><\/p>\n<h2>Table of Contents<\/h2>\n<ul>\n<li><a href=\"#how-to-access-filter-options\">How to Access Filter Options<\/a>\n<ul>\n<li><a href=\"#divi-filter-options\">Divi Filter Options<\/a><\/li>\n<li><a href=\"#hue\">Hue<\/a><\/li>\n<li><a href=\"#saturation\">Saturation<\/a><\/li>\n<li><a href=\"#brightness\">Brightness<\/a><\/li>\n<li><a href=\"#contrast\">Contrast<\/a><\/li>\n<li><a href=\"#invert\">Invert<\/a><\/li>\n<li><a href=\"#sepia\">Sepia<\/a><\/li>\n<li><a href=\"#opacity\">Opacity<\/a><\/li>\n<li><a href=\"#blur\">Blur<\/a><\/li>\n<li><a href=\"#blend-modes\">Blend Modes<\/a><\/li>\n<li><a href=\"#normal\">Normal<\/a><\/li>\n<li><a href=\"#multiply\">Multiply<\/a><\/li>\n<li><a href=\"#screen\">Screen<\/a><\/li>\n<li><a href=\"#overlay\">Overlay<\/a><\/li>\n<li><a href=\"#darken\">Darken<\/a><\/li>\n<li><a href=\"#lighten\">Lighten<\/a><\/li>\n<li><a href=\"#color-dodge\">Color Dodge<\/a><\/li>\n<li><a href=\"#color-burn\">Color Burn<\/a><\/li>\n<li><a href=\"#hard-light\">Hard Light<\/a><\/li>\n<li><a href=\"#soft-light\">Soft Light<\/a><\/li>\n<li><a href=\"#difference\">Difference<\/a><\/li>\n<li><a href=\"#exclusion\">Exclusion<\/a><\/li>\n<li><a href=\"#hue\">Hue<\/a><\/li>\n<li><a href=\"#saturation\">Saturation<\/a><\/li>\n<li><a href=\"#color\">Color<\/a><\/li>\n<li><a href=\"#luminosity\">Luminosity<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#tips--best-practices-for-using-divis-filter-and-blend-mode-options\">Tips &amp; Best Practices for Using Divi&#8217;s Filter and Blend Mode Options<\/a>\n<ul>\n<li><a href=\"#applying-a-filter-affects-child-elements\">Applying a Filter Affects Child Elements<\/a><\/li>\n<li><a href=\"#combine-filter-options-with-hover-options\">Combine Filter Options With Hover Options<\/a><\/li>\n<li><a href=\"#use-screen-andor-multiply-blend-modes-for-masking-effects\">Use Screen and\/or Multiply Blend Modes for Masking Effects<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#more-resources\">Continue Learning<\/a><\/li>\n<\/ul>\n<h2 id=\"how-to-access-filter-options\">How to Access Divi Filter and Blend Mode Options<\/h2>\n<p>All Divi sections, rows, and modules have a Filter settings group that comes with a set of custom controls that allow you to adjust colors, contrast, brightness, and more. You can even blend elements together on the page with the 16 blend modes available.<\/p>\n<p>To access filter options click the gear icon to open the settings of the element you&#8217;re working on and navigate to\u00a0<strong>Design &gt; Filter<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full with-border\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/howtofindfilteroptions.jpg\" alt=\"How to find Divi Filter and Blend Mode Options\" width=\"1800\" height=\"1200\" \/><\/p>\n<h2 id=\"divi-filter-options\">Divi Filter and Blend Mode Options<\/h2>\n<p>Let&#8217;s take a look at each individual filter option, what they do and how they work.<\/p>\n<h4 id=\"hue\">Hue<\/h4>\n<p>A hue is a pure color. Hues include primary colors (red, yellow, and blue) and secondary colors (orange, green, and violet). Drag and drop the range slider or input a numerical value to adjust the hue.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/Hue-Filter-1-1.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/hue-filter-1.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h4 id=\"saturation\">Saturation<\/h4>\n<p>Saturation determines the overall intensity and vibrancy of the colors. The higher the number the more intense and vivid the colors are, and the lower the number the more dim and desaturated the colors are. A value of 0% will produce a grayscale image.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/Saturation-Filter-1-1.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/saturation-filter-1.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h4 id=\"brightness\">Brightness<\/h4>\n<p>This determines the brightness of the image. The higher the number, the brighter the image, the lower the number, the darker the image.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/Brightness-Filter-1-1.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/brightness-filter-1.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h4 id=\"contrast\">Contrast<\/h4>\n<p>This determines the intensity of the difference between colors. The higher the number, the more contrast, the lower the number, the less contrast between colors.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/Contrast-Filter-1-1.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/contrast-filter-1.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h4 id=\"invert\">Invert<\/h4>\n<p>Inverting colors means the color values become opposite values of what they are. Drag the range slider to determine the amount of inversion.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/Invert-Filter-1-1.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/invert-filter-1.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h4 id=\"sepia\">Sepia<\/h4>\n<p>Applying a sepia tone to an image gives it a soft brown. Drag the range slider to determine the intensity of the sepia tone applied.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/Sepia-Filter-1-1.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/sepia-filter-1.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h4 id=\"opacity\">Opacity<\/h4>\n<p>Opacity determines the amount of transparency for an element. Lessening the opacity increases the transparency of an element.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/Opacity-Filter-1-1.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/opacity-filter-1.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h4 id=\"blur\">Blur<\/h4>\n<p>Increasing the blur of an element reduces its clarity.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/Blur-Filter-1-1.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/blur-filter-1.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h2 id=\"blend-modes\">Blend Modes<\/h2>\n<p>A blending mode defines how layers interact with one another. You can apply a blend mode to a layer to change how the colors blend with the lower layers.<\/p>\n<h4 id=\"normal\">Normal<\/h4>\n<p>In Normal mode, the layers are simply stacked on one another, there is no mixing.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full with-border\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/1-normal.png\" alt=\"Divi Filter and Blend Mode Options normal example\" width=\"1800\" height=\"1046\" \/><\/p>\n<h4 id=\"multiply\">Multiply<\/h4>\n<p>In Multiply mode, the layers blend together, creating a darker color.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full with-border\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/2-multiply.png\" alt=\"Divi Filter and Blend Mode Options multiply example\" width=\"1800\" height=\"1049\" \/><\/p>\n<h4 id=\"screen\">Screen<\/h4>\n<p>In Screen mode, the base layer is inverted and multiples with the blending layer. This creates the opposite effect of the Multiply mode, making the colors brighter than the original colors.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full with-border\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/3-screen.png\" alt=\"Divi Filter and Blend Mode Options screen example\" width=\"1800\" height=\"1051\" \/><\/p>\n<h4 id=\"overlay\">Overlay<\/h4>\n<p>In Overlay mode, the bright areas become brighter and the dark areas become darker.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full with-border\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/4-overlay.png\" alt=\"Divi Filter and Blend Mode Options overlay example\" width=\"1800\" height=\"1048\" \/><\/p>\n<h4 id=\"darken\">Darken<\/h4>\n<p>In Darken mode, the base layer and blending layer are compared and the dark colors are kept.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full with-border\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/5-darken.png\" alt=\"Divi Filter and Blend Mode Options darken example\" width=\"1800\" height=\"1045\" \/><\/p>\n<h4 id=\"lighten\">Lighten<\/h4>\n<p>In Lighten mode, the base layer and blending layer are compared and the lighter colors are kept.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full with-border\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/6-lighten.png\" alt=\"Divi Filter and Blend Mode Options lighten example\" width=\"1800\" height=\"1047\" \/><\/p>\n<h4 id=\"color-dodge\">Color Dodge<\/h4>\n<p>In Color Dodge mode, the colors of the base layer are lightened and reduced in contrast. This creates an effect of saturated mid-tones.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full with-border\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/7-colordodge.png\" alt=\"Divi Filter and Blend Mode Options color dodge example\" width=\"1800\" height=\"1047\" \/><\/p>\n<h4 id=\"color-burn\">Color Burn<\/h4>\n<p>In Color Burn mode, the colors of the base layer darken, and the contrast increases and then blends with the colors of the blending layer. This mode is named after the photographic film technique of &#8220;burning&#8221; or overexposing prints in order to make the colors darker.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full with-border\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/8-colorburn.png\" alt=\"Divi Filter and Blend Mode Options color burn example\" width=\"1800\" height=\"1049\" \/><\/p>\n<h4 id=\"hard-light\">Hard Light<\/h4>\n<p>In the Hard Light mode, it all depends on the density of the blending layer. If the blending layer has lighter colors, then it will create a brighter effect like the Screen mode. However, if the blending layer has darker colors then it will create a darker effect like the Multiply mode.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full with-border\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/9-hardlight.png\" alt=\"Divi Filter and Blend Mode Options hard light example\" width=\"1800\" height=\"1050\" \/><\/p>\n<h4 id=\"soft-light\">Soft Light<\/h4>\n<p>In the Soft Light mode, it all depends on the density of the blending layer. If the blending layer has bright colors, it will create a brighter effect like the Color Dodge module, and if the blending layer has darker colors it will create a darker color like the Color Burn mode.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full with-border\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/10-softlight.png\" alt=\"Divi Filter and Blend Mode Options soft light example\" width=\"1800\" height=\"1046\" \/><\/p>\n<h4 id=\"difference\">Difference<\/h4>\n<p>In Difference mode, the colors of the blending layer are subtracted from the base layer and uses the resulting value to combine with the original base colors. White inverts the base layer colors, black produces no change, and dark gray applies a slight darkening effect.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full with-border\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/11-difference.png\" alt=\"Divi Filter and Blend Mode Options difference example\" width=\"1800\" height=\"1048\" \/><\/p>\n<h4 id=\"exclusion\">Exclusion<\/h4>\n<p>Exclusion mode is very similar to Difference. White inverts the base layer colors, black produces no change, and 50% gray produces 50% gray.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full with-border\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/12-exclusion.png\" alt=\"Divi Filter and Blend Mode Options exclusion example\" width=\"1800\" height=\"1048\" \/><\/p>\n<h4 id=\"hue\">Hue<\/h4>\n<p>The hue blend mode preserves the luminosity and saturation of the base layer while adopting the hue of the blending layer.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full with-border\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/13-hue.png\" alt=\"Divi Filter and Blend Mode Options hue example\" width=\"1800\" height=\"1045\" \/><\/p>\n<h4 id=\"saturation\">Saturation<\/h4>\n<p>The saturation blend mode preserves the luminosity and hue of the base layer while adopting the saturation of the blend layer.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full with-border\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/14-saturation.png\" alt=\"Divi Filter and Blend Mode Options saturation example\" width=\"1800\" height=\"1042\" \/><\/p>\n<h4 id=\"color\">Color<\/h4>\n<p>The Color blend mode preserves the luminosity of the base layer while adopting the hue and saturation of the blend layer.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full with-border\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/15-color.png\" alt=\"Divi Filter and Blend Mode Options color blend example\" width=\"1800\" height=\"1047\" \/><\/p>\n<h4 id=\"&quot;luminosity\">Luminosity<\/h4>\n<p>In Luminosity mode, the hue and saturation of the base layer are preserved while adopting the luminosity of the blend layer.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full with-border\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/16-luminosity.png\" alt=\"Divi Filter and Blend Mode Options luminosity blend example\" width=\"1800\" height=\"1046\" \/><\/p>\n<h2 id=\"tips--best-practices-for-using-divis-filter-and-blend-mode-options\">Tips &amp; Best Practices for Using Divi&#8217;s Filter and Blend Mode Options<\/h2>\n<p>When working with Div&#8217;s Filter and Blend Mode options, keep these best tips and practices in mind.<\/p>\n<h4 id=\"applying-a-filter-affects-child-elements\">Applying a Filter Affects Child Elements<\/h4>\n<p>It&#8217;s important to keep in mind that when a filter is applied to an element (section, row, column, or module) it affects any child elements inside the parent element. So if you apply a filter to a Section, it will affect all the rows and modules inside that section.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full with-border\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/parentchildelements.png\" alt=\"How filter effects interact in Divi Filter and Blend Mode Options\" width=\"1800\" height=\"661\" \/><\/p>\n<h4 id=\"combine-filter-options-with-hover-options\">Combine Filter Options With Hover Options<\/h4>\n<p>Applying filter effects on hover creates interactive designs that change appearance on hover. To learn more about hover effects, check out <a href=\"#\">this doc<\/a>.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/Hover-Filter-Example-1.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/hover-filter-example.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h4 id=\"use-screen-andor-multiply-blend-modes-for-masking-effects\">Use Screen and\/or Multiply Blend Modes for Masking Effects<\/h4>\n<p>Using the Screen and Multiple blend modes, you can create some truly stunning overlay effects using the Filters options. In the examples below we&#8217;ll create two sections that apply a peek-a-boo effect to text that shows the background image beneath it.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full with-border\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/3-filterexample-01.png\" alt=\"How to use Divi Filter and Blend Mode Options\" width=\"1800\" height=\"571\" \/><\/p>\n<p><strong>Screen Mode<\/strong><\/p>\n<ol>\n<li>Add a Section.\n<ol>\n<li>Add a background image to the section.<\/li>\n<li>Remove all the padding from the section.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/1-Screenexample-1.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/1-screenexample.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<ol>\n<li>Add a Row.\n<ol>\n<li>Add a white background to the row: #ffffff<\/li>\n<li>Set the row size to 100%<\/li>\n<li>Adding top and bottom padding to row: 300px.<\/li>\n<li>Set the Filter blend mode to Screen.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/2-Screenexample-1.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/2-screenexample.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<ol>\n<li>Add Text Module.\n<ol>\n<li>Add header text and set heading tag to h1. Center text.<\/li>\n<li>Font Weight: Ultra Bold<\/li>\n<li>Font Size: 7rem<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/3-Screenexample-1.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/3-screenexample.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<p><strong>Multiply Mode<\/strong><\/p>\n<ol>\n<li>Add a Section.\n<ol>\n<li>Add a background image to the section.<\/li>\n<li>Remove all the padding from the section.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/1-Multiply-Example.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/1-multiplyexample.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<ol>\n<li>Add a Row.\n<ol>\n<li>Add a black background to the row: #000000<\/li>\n<li>Set the row size to 100%<\/li>\n<li>Adding top and bottom padding to row: 300px.<\/li>\n<li>Set the Filter blend mode to Multiply.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/2-Multiplyexample-1.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/2-multiplyexample.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<ol>\n<li>Add Text Module.\n<ol>\n<li>Add header text and set heading tag to h1. Center text.<\/li>\n<li>Font Color: white #ffffff<\/li>\n<li>Font Weight: Ultra Bold<\/li>\n<li>Font Size: 7rem<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/3-Multiplyexample-1.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/08\/3-multiplyexample.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h2 id=\"more-resources\">Continue Learning<\/h2>\n<ul>\n<li><a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/using-filters-hero-sections-and-ctas-to-expand-a-minimal-portfolio-homepage\" target=\"_blank\" rel=\"noopener noreferrer\">Using Filters, Hero Sections, and CTA\u2019s to Expand a Minimal Portfolio Homepage<\/a><\/li>\n<li><a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/how-to-recreate-the-color-filters-effects-blend-mode-examples-with-divi-part-1\" target=\"_blank\" rel=\"noopener noreferrer\">How to Recreate The Color Filters, Effects &amp; Blend Mode Examples with Divi (Part 1)<\/a><\/li>\n<li><a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/how-to-recreate-the-color-filters-effects-blend-mode-examples-with-divi-part-2\" target=\"_blank\" rel=\"noopener noreferrer\">How to Recreate The Color Filters, Effects &amp; Blend Mode Examples with Divi (Part 2)<\/a><\/li>\n<li><a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/how-to-use-divis-new-filter-options-to-beautify-your-images\">How to Use Divi\u2019s New Filter Options to Beautify Your Images<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The Divi Filter and Blend Mode options give you the power to make all kinds of color adjustments to design elements in Divi.<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,2],"tags":[],"class_list":["post-11138","post","type-post","status-publish","format-standard","hentry","category-divi-builder","category-divi"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Elegant Themes Documentation<\/title>\n<meta name=\"description\" content=\"The Divi Filter and Blend Mode Options allow you to apply unique effects and color adjustments to every design element in Divi.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.elegantthemes.com\/documentation\/divi\/filter-and-blend-mode-options\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using Divi Filter and Blend Mode Options - Elegant Themes Documentation\" \/>\n<meta property=\"og:description\" content=\"The Divi Filter and Blend Mode Options allow you to apply unique effects and color adjustments to every design element in Divi.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.elegantthemes.com\/documentation\/divi\/filter-and-blend-mode-options\/\" \/>\n<meta property=\"og:site_name\" content=\"Elegant Themes Documentation\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-30T00:13:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-03T22:51:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/howtofindfilteroptions.jpg\" \/>\n<meta name=\"author\" content=\"Chaucee Stillman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Chaucee Stillman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/filter-and-blend-mode-options\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/filter-and-blend-mode-options\\\/\"},\"author\":{\"name\":\"Chaucee Stillman\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/3de16ce355468e6b8ba5b9c41fddf1e8\"},\"headline\":\"Using Divi Filter and Blend Mode Options\",\"datePublished\":\"2022-12-30T00:13:20+00:00\",\"dateModified\":\"2023-02-03T22:51:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/filter-and-blend-mode-options\\\/\"},\"wordCount\":1303,\"image\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/filter-and-blend-mode-options\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/howtofindfilteroptions.jpg\",\"articleSection\":[\"Divi Builder Plugin Documentation\",\"Divi Theme Documentation\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/filter-and-blend-mode-options\\\/\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/filter-and-blend-mode-options\\\/\",\"name\":\"Using Divi Filter and Blend Mode Options - Elegant Themes Documentation\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/filter-and-blend-mode-options\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/filter-and-blend-mode-options\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/howtofindfilteroptions.jpg\",\"datePublished\":\"2022-12-30T00:13:20+00:00\",\"dateModified\":\"2023-02-03T22:51:26+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/3de16ce355468e6b8ba5b9c41fddf1e8\"},\"description\":\"The Divi Filter and Blend Mode Options allow you to apply unique effects and color adjustments to every design element in Divi.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/filter-and-blend-mode-options\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/filter-and-blend-mode-options\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/filter-and-blend-mode-options\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/howtofindfilteroptions.jpg\",\"contentUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/howtofindfilteroptions.jpg\",\"width\":1800,\"height\":1200,\"caption\":\"How to find Divi Filter and Blend Mode Options\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/filter-and-blend-mode-options\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using Divi Filter and Blend Mode Options\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#website\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/\",\"name\":\"Elegant Themes Documentation\",\"description\":\"Just another WordPress site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/3de16ce355468e6b8ba5b9c41fddf1e8\",\"name\":\"Chaucee Stillman\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59f7363034124f1df7ab033be2af9b43b4d1b965245e21d0c5b610ca896cd534?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59f7363034124f1df7ab033be2af9b43b4d1b965245e21d0c5b610ca896cd534?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59f7363034124f1df7ab033be2af9b43b4d1b965245e21d0c5b610ca896cd534?s=96&d=mm&r=g\",\"caption\":\"Chaucee Stillman\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Elegant Themes Documentation","description":"The Divi Filter and Blend Mode Options allow you to apply unique effects and color adjustments to every design element in Divi.","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:\/\/www.elegantthemes.com\/documentation\/divi\/filter-and-blend-mode-options\/","og_locale":"en_US","og_type":"article","og_title":"Using Divi Filter and Blend Mode Options - Elegant Themes Documentation","og_description":"The Divi Filter and Blend Mode Options allow you to apply unique effects and color adjustments to every design element in Divi.","og_url":"https:\/\/www.elegantthemes.com\/documentation\/divi\/filter-and-blend-mode-options\/","og_site_name":"Elegant Themes Documentation","article_published_time":"2022-12-30T00:13:20+00:00","article_modified_time":"2023-02-03T22:51:26+00:00","og_image":[{"url":"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/howtofindfilteroptions.jpg","type":"","width":"","height":""}],"author":"Chaucee Stillman","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Chaucee Stillman","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/filter-and-blend-mode-options\/#article","isPartOf":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/filter-and-blend-mode-options\/"},"author":{"name":"Chaucee Stillman","@id":"https:\/\/www.elegantthemes.com\/documentation\/#\/schema\/person\/3de16ce355468e6b8ba5b9c41fddf1e8"},"headline":"Using Divi Filter and Blend Mode Options","datePublished":"2022-12-30T00:13:20+00:00","dateModified":"2023-02-03T22:51:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/filter-and-blend-mode-options\/"},"wordCount":1303,"image":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/filter-and-blend-mode-options\/#primaryimage"},"thumbnailUrl":"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/howtofindfilteroptions.jpg","articleSection":["Divi Builder Plugin Documentation","Divi Theme Documentation"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/filter-and-blend-mode-options\/","url":"https:\/\/www.elegantthemes.com\/documentation\/divi\/filter-and-blend-mode-options\/","name":"Using Divi Filter and Blend Mode Options - Elegant Themes Documentation","isPartOf":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/filter-and-blend-mode-options\/#primaryimage"},"image":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/filter-and-blend-mode-options\/#primaryimage"},"thumbnailUrl":"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/howtofindfilteroptions.jpg","datePublished":"2022-12-30T00:13:20+00:00","dateModified":"2023-02-03T22:51:26+00:00","author":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/#\/schema\/person\/3de16ce355468e6b8ba5b9c41fddf1e8"},"description":"The Divi Filter and Blend Mode Options allow you to apply unique effects and color adjustments to every design element in Divi.","breadcrumb":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/filter-and-blend-mode-options\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.elegantthemes.com\/documentation\/divi\/filter-and-blend-mode-options\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/filter-and-blend-mode-options\/#primaryimage","url":"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/howtofindfilteroptions.jpg","contentUrl":"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/howtofindfilteroptions.jpg","width":1800,"height":1200,"caption":"How to find Divi Filter and Blend Mode Options"},{"@type":"BreadcrumbList","@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/filter-and-blend-mode-options\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.elegantthemes.com\/documentation\/"},{"@type":"ListItem","position":2,"name":"Using Divi Filter and Blend Mode Options"}]},{"@type":"WebSite","@id":"https:\/\/www.elegantthemes.com\/documentation\/#website","url":"https:\/\/www.elegantthemes.com\/documentation\/","name":"Elegant Themes Documentation","description":"Just another WordPress site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.elegantthemes.com\/documentation\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.elegantthemes.com\/documentation\/#\/schema\/person\/3de16ce355468e6b8ba5b9c41fddf1e8","name":"Chaucee Stillman","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/59f7363034124f1df7ab033be2af9b43b4d1b965245e21d0c5b610ca896cd534?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/59f7363034124f1df7ab033be2af9b43b4d1b965245e21d0c5b610ca896cd534?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/59f7363034124f1df7ab033be2af9b43b4d1b965245e21d0c5b610ca896cd534?s=96&d=mm&r=g","caption":"Chaucee Stillman"}}]}},"_links":{"self":[{"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/posts\/11138","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/comments?post=11138"}],"version-history":[{"count":66,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/posts\/11138\/revisions"}],"predecessor-version":[{"id":14637,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/posts\/11138\/revisions\/14637"}],"wp:attachment":[{"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/media?parent=11138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/categories?post=11138"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/tags?post=11138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}