Automatically Change FONT color based on BG color

How do you change font color based on background color zones? Which script can do that easy?

For example, if Upper left zone, font is black, if lower zone font is white, if upper right zone font is white.
image

If your concern is the legibility of the font at all time, you can try various shadows to make sure the font stays readable even if on a bg that’s close to its color (provided the shadow is the inverse of the font color).

You can also use CSS custom code to use a Difference blend mode. Here’s a demo of the effect in Photoshop with a white text se to difference:

http://vincent.polenordstudio.fr/snap/screencast_2018-11-30_12-57-52.mp4

CSS code would be:

<style>
.yourclass {mix-blend-mode: difference}
</style>

Place this code in a Custom Code component right inside of the page so you can see the results directly in the Designer.

3 Likes

And if, like me, you wan’t mix-blend-mode direct inside the Webflow’s Designer, without custom code, you can upvote this idea I posted a while ago :wink:
https://wishlist.webflow.com/ideas/WEBFLOW-I-1290

1 Like

Oh yeah!

And background-blend modes too, you can edit your idea :slight_smile:

2 Likes

Yeah, just updated the idea with background-blend-mode, thanks!

2 Likes