Background Gradient Across Sections

Hi - I’m trying to get a background gradient that applies across a number of sections. So say I have a page with 8 sections, I want 4 of them to act as a single section for background only and have a single gradient applied across them.

Is this possible? It seems to me like it would be a frequent requirement but it’s one of those rare times where I haven’t found an example or discussion of it on the web.

Any help appreciated, thanks


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

It’s simple and It’s very easy. First, you select a section. Then you add a class to it and after adding this class add Background Gradient.

Next, you will use the class in different sections to apply a single gradient applied across them.

Thanks for this but this results in the gradient being applied in each section, not across all sections as if one whole section, see below screenshot based on suggestion.

Did you ever figure out a solution?

A very easy way to fix this would be to put all sections into one div block.

You could name this something like “bg-wrapper”, and then apply your gradient here!

Just make sure the individual sections don’t have a background color set, or the gradient won’t be visible.

Hope this helps! :smiley:

1 Like