How to make a dynamic CMS background gradient in Webflow: set the start and stop colours from a CMS colour field with one HTML Embed, so editors can just pick a colour.
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 (a dynamic gradient background driven by a CMS colour field), 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 at least one Colour Selector. Our footer only needed one colour, but you can have more and just adapt the code to suit your needs.
Finally, we need an HTML Embed on the page with the following code in it (somewhere close to the top is best):
You can also see the code in our CodePen for this post.
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. In the current Designer, click the purple dot that appears next to the line in Edit code and pick your colour field. 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.
Frequently asked questions
Why does picking a CMS colour turn my gradient into a solid background?
In our experience, picking a CMS colour for the background gives you a solid background instead of swapping the colours inside your gradient. That is why we set the gradient in a small HTML Embed instead, where the CMS colour goes inside the gradient code.
Can I add a dynamic gradient overlay to CMS background images?
Yes, it should work, because the embed simply styles whichever class you point it at. Put the gradient on its own overlay element that sits on top of the image, and set it to go from transparent to the colour picked in the CMS. We built this post around a footer, so test it on your own layout first.
Can I use more than one colour in the gradient?
You can. Add a colour field to your collection for each stop you want, then drop each one into the gradient code in the embed, including the start, stop and in-between colours.
Do I need to touch the footer symbol?
No. We left the symbol alone and overrode its gradient on the CMS Template Page with the embed, which is why the code has an !important on it.
If you like CMS tricks like this one, have a look at our posts on creating text spans in dynamic CMS text elements, CMS powered background videos in Webflow, building a CMS powered scroller or ticker tape and breaking the CMS grid with a flexbox CMS pattern. You can also browse our Webflow cloneables.
