Jump to content

Gradient between sections

By BrandonH, in Customize with code

Go to solution Solved by creedon,

Recommended Posts

BrandonH Level 4

BrandonH

Posted
Posted

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!

Link to comment
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

creedon
creedon

Add the following to Design > Custom CSS. .homepage #page .page-section:first-child .section-background-overlay { background : linear-gradient( to bottom, transparent, var( --siteBackgroundCo

Web_Solutions
Web_Solutions

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

creedon
creedon

I have updated my CSS in my previous post. Let us know how it goes.

Posted Images

creedon Level 14

creedon

Posted
Posted

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
Web_Solutions Level 8

Web_Solutions

Posted
Posted
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.

Link to comment
  • Solution
creedon Level 14

creedon

Posted
  • Solution
Posted (edited)

Add the following to Design > Custom CSS. 

.homepage #page .page-section:first-child .section-background-overlay {

  background : linear-gradient( to bottom, transparent, var( --siteBackgroundColor ) );
  opacity : 1 !important;
  
  }

95262875_ScreenShot2022-09-14at1_03_26PM.png.eba15a5165fb0e3b763210b35fe2b18b.png

This is for v7.1 and specific to the posters need.

Let us know how it goes.

Edited by creedon
version 2

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
BrandonH Level 4

BrandonH

Posted
  • Author
Posted

@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?

Screen Shot 2022-09-15 at 3.37.51 PM.png

Link to comment

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources