Creating a color gradient that spans across the site body

[BreakMaker]

Hi there,
I am trying to replicate this Squarespace site. Amongst others I want to recreate the green-orange color gradient (below the navbar) that spans across the page body and is partly behind the first section.

https://www.cubescircle.de/de/beschreibung

Here’s what I tried:

• I tried applying the color gradient

linear-gradient(to bottom, #5dbcd2 0%, #fcb82c 100%) repeat scroll 0% 0% transparent ;

under Content CSS but I found no way of limiting the height of that (so it is not applied to the entire page).

Then I tried creating a section and using element CSS to enter the code like this:

$el.x-section{
background-color:linear-gradient(to bottom, #5dbcd2 0%, #fcb82c 100%) repeat scroll 0% 0% transparent ;
width: 100%
display: inline-block;
margin: 0px;
right;
}

But it does not work at all. Could you please give me a hint how to start.

Thanks!

[prakash_s]

Hi Zoltan,

Thanks for writing to us.

You need to use background-image instead of background-color to add Gradient colour and add height with code also. Replace your code with this code.

$el.x-section{
background-image: -webkit-linear-gradient(45deg,#41aabe 0%,#91c350 50%,#faaa00 100%);
width: 100%;
display: inline-block;
margin: 0px;
height:50vh;
}

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks

[BreakMaker]

Hello Prakash,
Thanks for your reply. This worked to create the gradient. I still need to make the secion full-width, like on the reference page.

May I ask this because I am not sure I understand your message fully:
You are saying that questions related to how to do something in the theme using CSS are outside of support, you just made a kind exception in my case? But if so I am surprised because the forum is full of threads where you are giving advice to X Theme users on how to do stuff with CSS. (e.g. this one https://theme.co/archive/forums/topic/question-about-color-gradient/)

Has the support policy changed?

[marc_a]

Hi Zoltan,

The themeco support policy wasn’t changed and it is the same as before. We just didn’t meet the user expectations. We don’t always provide CSS to the customers. We are just giving them an idea as a starting point. You may check the support policy here.

Hope that helps.

Thank you.