Gradient issues, trying to add gradient background to pages but code isn't working

1 hour ago, MagicForestEmporium said:

Sorry, I always give too much context but I'd rather give too much than not enough 😅

I want to have some gradient backgrounds for the store pages of my website to match the theme I have going with the rest of the pages. With the smaller sections the simple linear gradient between two colors looks really nice. It's conflicting colors (pinks and greens) so pages with much longer sections, like some of the store pages, take longer to get through the gradient and it makes a huge chunk a mauve-y grey/brown color. On other pages this actually looks pretty nice. But having a huge part of the store background being that color makes it look...less appealing. 

I used a few sites to try to create a gradient that blends a little better for the long store pages, like 3 color gradients and trying other methods to get a similar effect. Most didn't help much, I have one that's ok-ish but I don't want "ok-ish" for the website. Then I found a site to build gradients layer by layer and I made a beautiful gradient I'm very happy with....except I can't get the code to work on Squarespace. I've fiddled everything I can think of but I don't know what I'm doing. I know it's probably something simple like the code is written in a way SS doesn't understand, it's just not compatible, or I didn't input it correctly. But I need a little help figuring out which it is because if it's just not a compatible code I don't want to waste time trying to make it work.

Since the pages are too long for me to screenshot what I mean about each one, I set this page to the original simple linear gradient so you can see what I mean: https://magicforestemporium.com/store Password: test123

And on this page I used the code that looks ok-ish: https://magicforestemporium.com/magic-forest-wands Pawssword: test123

The code for the one that does work and looks ok-ish:
section[data-section-id="66831c4119833f6c195ef6a5"] .section-background {
  background-color: transparent;
  background-image: linear-gradient(to bottom, #b67467, #c08577, #ca9588, #d4a699, #ddb7ab, #debbab, #dec0ac, #ddc4ad, #cfbf9d, #bcba91, #a4b789, #88b388);
}

Here's the base code for the gradient I want to use, before I made any changes to it:
background-size: 100% 100%;
background-position: 0px 0px,0px 0px,50px 50px,0px 0px,0px 0px;
background-image: linear-gradient(0deg, #E9CEC42E 1%, #E9CEC485 15%, #b57366 100%),linear-gradient(0deg, #88b388 0%, #B1D1A0B5 27%, #DBEFB900 100%),linear-gradient(0deg, #E9CEC43B 16%, #E9CEC4 100%),linear-gradient(0deg, #DBEFB9FF 0%, #E9CEC4 100%);

 

I decided to just go with the ok-ish gradient just adjusted a little bit, and I made the gradient into an image for the shorter store pages. The two really long ones still look weird with the image so I'm just doing the css for those two pages. The gradient might not be best on the main store page anyway since the text isn't in blocks on that page and it could be harder to read. But I'll mark this as solved.