Tutorial & code

Row Background Blend modes

This row template contains the CSS blend mode info to create some nice blends between Beaver Builder background colors and images.

VIDEO

CODE

Minimum BB plugin required: Lite Saved under: Rows
Skill level: Beginner Contributor: David Waumsley

Template Location

Video

Notes

See the Row Background Blend modes template in action.

Example

Code

CSS

.fl-row-content-wrap{
background-blend-mode:multiply; 
}

/*

|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color
|luminosity|exclusion|difference|hue|hard-light|soft-light|color-burn|

Darkening - darken, multiply, and color-burn darken images in their own ways.
Lightening- lighten, screen and color-dodge lighten up the image.
Contrast- overlay, soft-light and hard-light modes play up the contrast.
Comparative - difference and exclusion modes would fall in this category.

https://dev.opera.com/articles/getting-to-know-css-blend-modes/
*/