Subtract effect

Hi there,

Are there any ways to do a thing like the img below on webflow?

I would like a subtract effect on A paragraph over certain area, so that the text is readable on different color area.
Any helps are really appreciated!

Thanks.


Hi @Kana_Sano :wave:

Judging by the blue text over the yellow, I think this is likely using CSS blend modes, which aren’t yet available for editing natively in Webflow.

You can add in a line of custom code to make this work, here’s a quick video to show you how easy it is:

CloudApp

You need to make sure the text is a child of the div. You can use a gradient as I did here, other solid colours, or a background image for cool effect.

Here is the documentation for using blend modes, so you can try a few out to see what effects you can create. Just remember to update your class names so they match what is in the designer.

@vincent also created a cool page on his sandbox site explaining the blend modes that you should take a look at. http://sab.webflow.io/blend-modes

If you want to use this effect on every element with that class (i.e on multiple pages) then you can do so by adding the code to the custom code settings in your dashboard.

Hope that helps!

2 Likes