The Divi Filter and Blend Mode options give you the power to adjust color to design elements in Divi.

It includes 16 unique blending effects you can apply to any Divi element!

In this guide, we'll explore how to use the Filter and Blend Mode options to modify your designs uniquely.

All Divi Sections, Rows, and Modules have a Filters option group with custom controls that allow you to adjust colors, contrast, brightness, and more.

You can blend elements on the page with the 16 available blend modes.

Let's take a look at each filter option, what they do and how they work.

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.

Saturation determines the overall intensity and vibrancy of the colors.

The higher the number, the more intense and vivid the colors are; the lower the number, the dim and desaturated the colors. A value of 0% will produce a grayscale image.

Brightness determines the brightness of the image.

The higher the number, the brighter the image. The lower the number, the darker the image.

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.

Inverting colors means the color values become opposite values of what they are.

Drag the range slider to determine the amount of inversion.

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.

Opacity determines the amount of transparency for an element. Lessening the opacity increases the transparency of an element.

Increasing the blur of an element reduces its clarity.

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.

In Normal mode, the layers are stacked on one another. There is no mixing.

In Multiply mode, the layers blend, creating a darker color.

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.

In Overlay mode, the bright areas become brighter, and the dark areas become darker.

The base and blending layers are compared in Darken mode, and the dark colors are kept.

In Lighten mode, the base and blending layers are compared, and the lighter colors are kept.

In Color Dodge mode, the colors of the base layer are lightened and reduced in contrast. This creates an effect of saturated mid-tones.

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 burning or overexposing prints to make the colors darker.

In the Hard Light mode, it all depends on the density of the blending layer.

If the blending layer has lighter colors, it will create a brighter effect, like the Screen mode.

However, if the blending layer has darker colors, it will create a darker effect like the Multiply mode.

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.

In Difference mode, the colors of the blending layer are subtracted from the base layer, and the resulting value combines with the original base colors.

White inverts the base layer colors, black produces no change, and dark gray applies a slight darkening effect.

The exclusion mode is very similar to the Difference. White inverts the base layer colors, black produces no change, and 50% gray produces 50% gray.

The Hue blend mode preserves the luminosity and saturation of the base layer while adopting the hue of the blending layer.

The Saturation blend mode preserves the base layer's luminosity and hue while adopting the blend layer's saturation.

The Color blend mode preserves the base layer's luminosity while adopting the blend layer's hue and saturation.

In Luminosity mode, the hue and saturation of the base layer are preserved while adopting the luminosity of the blend layer.

Remember these best tips and practices when working with Div's Filters and Blend Modes options.

It's important to remember that when a filter is applied to an element (Section, Row, Column, or Module), it affects any child elements inside the parent element. That means that applying a filter to a Section will affect all the rows and modules inside that section.

Applying filter effects on hover creates interactive designs that change the appearance of the hover. To learn more about hover effects, check out this doc.

Using the Screen and Multiple blend modes, you can create stunning overlay effects using the Filters options.

In the examples below, we'll create two sections that apply a peek-a-boo effect to text that shows the background image beneath it.

Screen Mode

Multiply Mode