Streaming live at 10am (PST)

Automatically Change FONT color based on BG color


#1

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


#2

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:

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

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


#4

Oh yeah!

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


#5

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