Webflow Dynamic CMS powered Gradients | Control color, position and angle

Опубликовано: 30 Март 2026
на канале: Design Break
2,822
58

I've seen a few people ask about how to have a gradient use a color or colors specified in the CMS. It's actually quite easy to do, so I've made a tutorial on how to do it.

I can add code to the video description so the code snippet for the HTML embeds can be found here: https://www.danielclydesdale.com/test...

The tutorial is made so it can be understood by those who don't have any development knowledge at all. But the short version for developers, or those with solid webflow knowledge is this:

For the template page you create an HTML embed (anywhere on the page) with a style tag inside, and apply a gradient style to whichever classes you want, and you use the purple CMS data option to insert the color info from the CMS into the CSS for the gradient.

On a collection list, you can't use this method, so instead, create the div, give it all the style properties, then replace the div block with an HTML embed element that has the code to add a div inside with that same class as the div you just deleted, and an inline style to add a gradient background. Then you add the color values in as per the previous method using the purple CMS data.

Hope this helps someone!