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!