How can I create a dynamic color gradient overlay on my dynamic background image?

In this test blog template I gave the blog posts a custom color. They also have an image.
In the blog posts template I want to give the images an dynamic color overlay from their own color. (My idea in the future is to give them a custom overlay color based on their category).

I can get the background color from my dynamic collection, but it is solid and I can’t seem to change it…

@RobertoMaddaloni, I know using a BG image will allow you to do some crazy thing, but I dont think using the color feature will work without some custom code added to it.

@webflow support can you help with this issue?

1 Like

Okay… So I am not a developer, meaning I would need someone to help me solve this solution with custom code. Having both a dynamic image and dynamic color as background is too specififc then?

Yes, I believe you can only have one or the other. You would be able to create an overlay as a separate div block though. It would just be an absolute position to make it work. I haven’t had the need for that feature yet, so I can’t say for 100% certain. But the testing I did with your share link gave me that answer.

1 Like

Can you just have the same color overlay on all collection images in the same position? I am trying to overlay the collection hero image on blog posts but its not working.

Hi @danmaurer please provide your project share link?

Best Regards,
~ Brandon

Old post I know, but maybe this will help someone else, because I was looking for a way to have a gradient overlay using the dynamic CMS color property and found this thread There is another thread but it is locked with no solution posted.

I solved it by first creating the div that I wanted to be the overlay, I gave mine a class of ‘gradient-fade’. Put the div in the right place and give it position absolute, correct z-index and so on, but leave the background unstyled.

Then I deleted the div (but the CSS is obviously still present).

Now add an HTML embed in the same spot where the div was. Add the code to add a div (and add the class name you used where it says class) with a gradient background like this:

<div class="gradient-fade" style="background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, XXXXXXXX 100%);"></div>

Finally, highlight the XXXXXXXX there and then click the purple “Add field” link in the top right, and choose your dynamic colour.

Save and close and you’ll get your dynamic colour overlay, and it’s visible in the designer too. This could be done with 2 or more CMS colours. I think you should even be able to control the gradient stop positions with the CMS if you wanted by using a number field and highlighting just the number from the percentage, and replacing it with the number field data. Same goes for the gradient angle.

Hope this helps!

Kind Regards,

1 Like

That is so cool - Thanks Daniel - great work.

No problem! I actually created a YouTube video about it too, if anyone is struggling with the exact setup. And I went into soe more detail with more advanced gradients :blush:


Hi Daniel !
I’m on it but it doesn’t work for me :smiling_face_with_tear:

<div class=“test” 
style="background-image: linear-gradient(90deg, color1 0%, color2 100%);">

My Read-only link: