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:
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.
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”?
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.