Jump to content

Add a transparent gradient overlay to individual sections?

Recommended Posts

Site URL: https://shuvamkabir.net

I'm attempting to add a white gradient above my background images. My first thought is to add an additional element that serves as an intermediate layer. I've tried the following, which I copied from here :

  /* in hsla color format (below), the last number is between 0 and 1 and changes the opacity */
  background-color:hsla(100,20,50,.5) !important; 

And then replace the background-color() with a linear-gradient() instruction. However, the above code doesn't seem to work. I should add that I am also using javascript to create a parallax effect, which I am hoping isn't conflicting.

Can anyone walk me through adding an additional element behind my text/image blocks and above my background to which I can add a gradient that shifts from white-to-transparent-to-white?

Alternatively, can anyone show me how to make an image block flush with with the top of a section (so I can just stick a small PNG at the top and bottom of my sections and call it good)?

Link to comment
4 hours ago, tuanphan said:




[data-section-id="xxxxxxxxxxxxxxx"] .section-background

Thank you for your response. Unfortunately, that didn't seem to have any effect. There's no discernible element added.

Link to comment
  • 6 months later...

I was able to create a gradient that works perfectly! 

I used this code:

section[data-section-id="5fec56e59056c549148b6205"] .section-background {
    background: linear-gradient(180deg, rgba(246,221,198,1) 0%, rgba(230,183,148,1) 35%, rgba(230,183,148,1) 100%) !important;

section[data-section-id="5fec56f99056c549148b6258"] .section-background {
background: linear-gradient(180deg, rgba(246,221,198,1) 0%, rgba(230,183,148,1) 35%, rgba(230,183,148,1) 100%) !important;  


There are other methods but the one I've shared above is for adding a gradient on one specific section of a page. 

Link to comment
  • 10 months later...

Hi,  I want to make my hero/background image on my first section fade out to transparent at the bottom.  Does anyone know how to do this?  I have tried section id and linear gradient from 100% - 0% but somethings not working.  

www.sucoca.com/about.  pw:chocolate

Thanks in advance to anyone who can help. 

this is what i've tried:

section[data-section-id="61922c0a9680fd299e101378"] .section-background{


section[data-section-id="61922c0a9680fd299e101378"] .section-background-overlay

background:linear-gradient( rgba(0,0,0,1),rgba(0,0,0,0.1)!important;)

Edited by failbetter
forgot to tag
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.