CMS Powered Background Gradients in Webflow

CMS Powered Background Gradients in Webflow
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.

Webflow CMS Powered Gradient Footer animation

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):

Webflow Footer With Gradient Background

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)

Webflow HTML Embed with background gradient code.
<style>.footer{background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, YOUR-CMS-COLOR-GOES-HERE 100%) !important;"}</style>

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:

Webflow CMS Powered Background Gradient

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.

Video Transript

Accordion Arrow

Today we're going to do a super quick video.

We've had a request from a client where they want service Pages like these and on each service page they want a color that's part of the service that determines H1 for the page, this background over here and a gradient in the footer and that'll change for each service.

So if we go back to the page, and this is all in Swedish, by the way, you'll see that over here. We've got the blue gradient. This one's got green, and we wanted to make it super simple for them and allow them to always just be able to use the editor. It's Clinic. They're not technically inclined. They want to create new services or change service, colours or update anything just use the editor to select the color. But of course you can't do that because in Webflow, when you select the background elements colour and overrides the gradient that you have so there's no stop and start but it's super easy to do this. So all you need is a color.

Let's hop into webflow. It's a bit slow today. So, let's see what happens.

Care services, so we've got it and it's not loading.

Give it a sec one. No, the there's a whole bunch of notices about dashboard issues. But okay. So basically you just need the colors you want for your gradient. We're only using one because this guy is going from the secondary color the gradient color for this

CMS item to transparent and

then

you need an embed which

we've got hiding over here.

And this is where you will set up the actual colors

to go from the CMS on

this collections page. So we're on the services template

page and I'm

just going to show you what it actually looks like. So the one of

the reasons we did this as well is to make things a little simpler. We've

got one footer with one gradient color for most

of the site and we didn't want to break the

symbol, right? So if you open up the symbol, where is

it for up it at

9, you'll see we've got

a linear gradient in

here and it's not this gradient. It's the default

break. We're just overriding it with gradient

color in bed.

So let's hop back into that.

And I'm just going to show you what you need to do codes in the

post. All you need to do is take the element you

want to change background color on in

this case. We've already got a background

color.

For that gradient from the rest of the site. So we're gonna

override it by adding it important at the back here and we're

gonna say we want the footer.

Which is down there to have a background image

linear gradient 180 degrees.

Parking at transparent and going

to our secondary colors. All you need to do is select your

color secondary page color

there. We have that and insert that

there we've got a hundred percent here. You can adjust that but I think on

the actual colors, they brought their primary color that's

on the title here down at secondary page

color to 50% So yeah, it's technically

and that's literally that the element you want

to style for her background linear

gradient.

To change that to radio or whatever you can

put in a start color if you want. We've got

a store color that's transparent for all of them. And it

ends in the sky at 100% And

it's important to override because we already

have background gradient on there and now

I'm just gonna break this

There we go.

Oh seven close and you'll see

it's gone back to that sort of faded blue that they

have on the rest of the side articles and stuff.

And the moment you change this you'll see

it's working immediately see.

seven close

and boom

you've got the color for that gradient and switch.

Sorry, yeah, that's some background

stuff happening there color for this

gradient.

color for this gradient

this guy ignore him. He's a scroller.

He's just got some background blending on

him to make him disappear.

And that's literally it published and you are done.

The code is on the blog post that's

linked in the comments here. You can

just copy paste and adapt it to your needs.

Hope this video helps you and if

you have any issues, you can comment in

the blog post or on the video. Although

I'm probably better answering comments from the blog post. And

yeah like And subscribe to stay

update with new tutorials. Check out our and analytics

tutorials. It's quite a few of them. Cheers.

recent projects