Gradient between sections

Site URL: http://alcyball.squarespace.com

Hi!

I'm wanting to create a smooth transition between the first and second sections of my website using a gradient fade. The idea would be that the hero image has a color overlay, then that color transitions from 0 opacity at the top of the image to 100 opacity at the bottom of the image, and the color overlay is the same color as the next section on the website so that the transition looks seamless.

Any help would be so much appreciated!

Your site is private please set up a site-wide password.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

12 hours ago, BrandonH said:

Site URL: http://alcyball.squarespace.com

Hi!

I'm wanting to create a smooth transition between the first and second sections of my website using a gradient fade. The idea would be that the hero image has a color overlay, then that color transitions from 0 opacity at the top of the image to 100 opacity at the bottom of the image, and the color overlay is the same color as the next section on the website so that the transition looks seamless.

Any help would be so much appreciated!

Your website is in private mode. Please set a password and share it.

Rookie mistake 🤦‍♂️ So sorry.

Site password is alcy

@creedon you are the man! Thanks so much!

It looks amazing on the screenshot you provided, but unfortunately, when I plug that CSS code in, the opacity of the gray overlay never quite reaches 100%. Can you see what I'm talking about in my screenshot? Any ideas what would be keeping it from getting to 100% opacity?

Quote

Any ideas what would be keeping it from getting to 100% opacity?

I have updated my CSS in my previous post.

Let us know how it goes.

Amazing, thanks so much!! 🙌

@creedon hello! I was wondering if you could help me with something very similar? I have a main image at the top that I would love to turn into a gradient throughout the rest of the page into as close of a color match as I can muster. Do you think you could help me out real quick? Thank you!

Here's the page.. Cars — Capturing The Blue Ridge

3 hours ago, LucasPhotography said:

Do you think you could help me out real quick?

Add the following to Design > Custom CSS.

[data-section-id="64bfcf0a89380d3e7951a6e9"] .section-border {

  background : linear-gradient( to top, transparent, var( --siteBackgroundColor ) );
  
  }

Let us know how it goes.

Site: https://www.uarizonasme.com/

Password: squash

I'm trying to apply a code to the CSS so I can get a gradient between two different colors: #049c4c and #043c64. (I'm using verion 7.1). This is the code I have so far: 

section, section .section-background, #header {
  background-color: #043c64 !important; 
}
.bright-inverse:not(.has-background) .section-background {
  background: #049c4c;
}

The code is applying to all the sections (not including the header), but I just want apply the gradient between these two sections:

@creedon thanks so much for the help. I copied and pasted that into the custom css tab and saved it and, as far as I can tell, it didn't change anything. Did I do something wrong? 

24 minutes ago, LucasPhotography said:

as far as I can tell, it didn't change anything.

It is. Notice the color difference between the top on bottom colors of the section.

25 minutes ago, LucasPhotography said:

Did I do something wrong?

Not as far as adding the code.

@creedon oh! I see! You're totally right. I guess I was thinking that it would be a way to make the transition from the top photo into the grid to be more seamless, but I suppose that would be a different thing. Thanks for the help though!

Hello @creedon, I would also like to do the same thing of adding a smooth transition between the hero and next following section. How do you even know which html tag name to use for custom CSS? 

2 hours ago, hjeeee said:

How do you even know which html tag name to use for custom CSS?

I learned HTML, CSS, how to use a web browser's inspector, among other web and computer technologies.