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:
/* 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.