Top / Bottom Separator as part of custom CSS Gradient Background

Beta
#1

Hello,

Would it be hard to implement (or maybe there is an existing workaround to this) that top / bottom separators could inherit same background from the entire section?

For example, my section has custom class, gradient background entirely, and I would like to add top separator that will be part of the same background, but the only options here is to choose 1 solid color. And this way it’s looks like it’s not part of the same section.

As you can see below, I can match the front of bottom section, but as gradient goes further (darker) there is a clear line.

#2

can you not add custom css background gradient to the customise part of the section?

#3

The top separator does not have any custom options. You can only select solid 1 color.

It would also be useful for people who have full size background image.

#4

Hi @rafalkukla

I’m sorry, the only way would be manually matching the BG color. The separators are standalone elements that sit inside the section. There isn’t a way to make them part of the same geometry so to speak.

There’s a pretty easy way to do it with CSS clip-path though. Here’s an example

  • Add two sections
  • Inspect Section 2 and set top padding to 100px and top margin to -100px
  • Add the following code to your element CSS for that Section
$el {
  clip-path: polygon(0 0, 100% 15%, 100% 100%, 0% 100%);
}

This site is handy to generate the CSS property needed: https://bennettfeely.com/clippy/
The problem is browser support: https://caniuse.com/#feat=css-clip-path

If you’re ok leaving some people with straight lines then go for it!

#5

Hi Alex,
Thanks.

I see what you mean, however when the section has a custom class with custom background, the clip-bath makes the cut down through the section at an angle and then is showing background that is selected in Theme section.

My workaround to this is to start with white or solid color from the start, and create gradient that goes only at 180 degrees so it’s from the top to the bottom and this way I can get this nice blend between section.

But I do think maybe this could be improved in the future, especially when people use Hero images, and they want to cut entire image at specific angle, instead of cutting it with solid color. Hope this make sense.

#6

You could make a “Negative space” triangle that actually lies at the bottom, inside the section and is a square that has a triangle-shape cutout. It covers the bottom part of the section and it needs to be the same color like the next section, creating the illusion that there is a triangle. This triangle has the background image visible.

I have made it once but can’t remember where and can’t find the css right now. I’ll try to make a new one. It is basically two half-Trapezoids one next to the other, set as an pseudo ::after element.

#7

Hi @rafalkukla,

The negative margin will stop the theme background from showing up. Here’s a better (yet more exaggerated example)

$el {
  
  /* Padding/Margin can be styled in the Inspector, but including here for the example */
  padding-top: 200px!important;
  margin-top: -150px!important;
  
  /* Vertical gradient, black to white */
  background: linear-gradient(rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%);
  
  /* Clipping polygon that matches the negative margin */
  clip-path: polygon(0 0, 100% 150px, 100% 100%, 0% 100%);
}

The additional padding pushes the section content back where it should be. The negative margin slides the section up into the previous sections space, then the clip path can match the negative margin (sorry, I didn’t do this last time) which gives a seamless look. Depending on how drastic the effect is you may need to give the section above more padding as well.

#8

Thank you!

#9

You’re welcome!