In this post, we’ll show you how to easily create gradients on CMS pages where the start and stop colours of your gradients are defined by pre-set colours in your collection list items.
This one seems so simple on a CMS page; just select the start, stop and any in-between colours of a gradient in the background colour settings for a CMS. But as you learn the hard way when you start using Webflow, that just changes your pre-set gradient to a solid background instead of just changing the selected colours to those set in the CMS
Fortunately, there’s a really easy solution to this, but I’m going to start with a little preamble first to explain where this post came from.
Soooo, we recently had a client that wanted CMS powered service pages for all the services they offered, with a specific colour assigned to each service that would determine their H1 text colour, the colour of a grainy noisy background where they had some scrolling text. And finally, a gradient on the footer that also changed to the same colour as the H1 and grainy background.
There are several approaches you can take, but we wanted to keep it simple so that the clinic’s staff this was for would be able to just manage all services from the Editor by picking a colour, and that’s that. At the same time, we also have a symbol footer, so ideally, we didn’t want to de-link anything, just have the normal footer on the CMS pages, but instead of their primary coloured gradient, it would change to the secondary colours of the services.
Anyhow, after thinking about this for a bit, it turns out all you need is an HTML Embed and a little code.
So what do we have? We’ve got our footer, that’s a symbol with a gradient applied to the background (not required, but we had a symbol that already had a gradient and wanted to override it on the CMS Template Page):
A CMS Item that has a least one Colour Selector. Our footer only needed one colour, but you can have more and just adapt the code to suite your needs.
Finally, we need an HTML Embed on the page with the following code in it (somewhere close to the top is best)
<iframe height="300" style="width: 100%;" scrolling="no" title="CMS Powered Background Gradients in Webflow" src="https://codepen.io/milkmoonstudio/embed/ExpGNpM?default-tab=html&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/ExpGNpM">
CMS Powered Background Gradients in Webflow</a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
Change the element name to the one you need the gradient background on; our style was just .footer, then set up your gradient; we needed it to be 180 degrees and to go from transparent to our selected colour. You can set a start, stop and in-between colours; up to you. Add your colours from the + Add Field dropdown. We added an !important to make sure it overrides the default styling.
Once you save you’ll see the change in the element you selected:
That's that, nothing more to it. Let us know if you have any questions by posting in the comments. We're rolling out a quick video for this, so like and subscribe to stay up to date with new content.
