Multiple colors in separator

Feature Requests
1

Hi there,

I was using a separator and discoverd that I only can use one color.
I’m working on a website where I want a seperator in 3 colors, blending from purple through turquois to green.

How can that be created and is it possible to add the background color gradient function to the seperator?

I now used a top separator in white to get a bottom seperator in gradient colors by using de backgroundcolor of the section. But that is not exactly what I want cause the wave is not “correct” now.

2

This requires custom CSS, as the fill property is not available in the Relative Styling panel.
Using the icon tab inside the Relative Styling panel, which is using the fill property for the color input will target svg path, so not useful either.

I think that would require some additional tweaks in terms of implementation and is not possible via CSS only.

As for your current use case, you can apply the following small snippet to your sections’ block custom CSS to achieve your desired result:

image
image1408×808 42 KB

/* reset opacity */
.blockclass .cc-separator-wrapper-top svg path {
   opacity: 1;
}

/* bottom layer color */
.blockclass .cc-separator-wrapper-top svg path:nth-child(1) {
   fill: green;
}

/* middle layer color */
.blockclass .cc-separator-wrapper-top svg path:nth-child(2) {
   fill: turquoise;
}

/* top layer color */
.blockclass .cc-separator-wrapper-top svg path:nth-child(3) {
   fill: purple;
}

Hope that helps for the moment.

Regarding the gradient colors, I created a (technical) similar request here.
But to be honest, the gradient color topic, when it comes to SVG, I don’t know if that does make any sense in terms of native implementation, or whether it’s even possible.

Instead, a field to insert custom SVG code could be the more straight-forward solution.
For separators and also for icons.

3

Thanks for the answer.
I have the Waves 2 type seperator. And I want a color gradient in it like this:

image
image1165×349 13.8 KB

I created this to make a gradient background and a white separator. I just want it to be reversed, a white background and a gradient separator. Now the left and right sides are just reversed on what I want. Now they are pointing up and I want the exact opposite.

Can I use a gradient in the css instead of “fill: purple”?

4

You can try this:

1.)

image
image273×725 16.6 KB

2.)

image
image858×393 24.1 KB

Result:

image
image1643×277 33.7 KB

Unfortunately, this is not possible.

5

Yes i tried to mirror but still not what the customer wants. The white needs to be gradient and the gradient white. Due the scape of the svg that’s different. Flipping it over results still in the wrong part filled. Look at the left and right edge. In your last example the white starts left at about zo% of the hight and grows. If you flip it the left starts at 25% and shrinks. Thats a difference.

6

That’s completely unrelated to the colors.
It’s just the shape of the SVG, which you can’t change.

Thinking a bit outside the box could bring you the desired results.
There are plenty of ways to achieve this. Cwicly allows you easily being a wizard.

7

Yes it is just the shape.
But the shape is perfect from waves 2. Exactly what I want. But i want gradient colors instead of one color.

That’s why I created this topic as new feature request.

I voted for the gradient color icon you mentioned.

Thanks for your replies.