Adding Gradient Color for Custom Separators

Adding Gradient Color Effect for Custom Separators

You can configure your Custom SVG Row Separators to use Gradient Colors by defining the SVG using <def> element.

Here's a reference on how the <def> element is used at https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs

Before we proceed, it's important to be familiar with creating Custom SVGs for Row Separators. Here's some documentation on how to create a Custom SVG that you can familiarize yourself with before proceeding: https://gambit.helpscoutdocs.com/article/192-custom-separators

Once you're able to create your Custom SVG and made it work with the plugin, we can proceed to add the gradient:

1. Omit the following Custom IDs

gambit_sep_main - Row Separator Main Color
gambit_sep_decor1 - Decor 1
gambit_sep_decor2 - Decor 2

These classes are only needed if you want to apply the color pickers from the plugin settings. If you're going to use a custom gradient, you need to use Custom SVG codes to manipulate the colors for the entire separator.

2. Add the <def> tag to add your define your SVG Code and Linear Gradient. Here's a sample CSS that you'll need for reference:

<defs>
<linearGradient id='gradient' gradientTransform='rotate(50)'>
<stop offset='0%' stop-color='#FFFFFF'/>
<stop offset='100%' stop-color='#000000'/>
</linearGradient>
</defs>

linearGradient and the ID defines the Gradient and ID which will be used as a reference later on in your Custom SVG's IDs
gradientTransform changes the gradient direction
stop and offset defines the positions where the color starts (0% left and 100% right). The amount of stop tags added will also define the amount of colors in the gradient and their positions
stop-color defines the start and end color of the gradient

3. After defining your Custom SVG, add the SVG IDs in your Custom SVG. This can be done by adding: fill="(url(#CustomSVGID)"

Example:

<defs>
<linearGradient id='gradient' gradientTransform='rotate(50)'>
<stop offset='0%' stop-color='#FFFFFF'/>
<stop offset='100%' stop-color='#000000'/>
</linearGradient>
</defs>

<polygon fill='url(#gradient)' points='800,172 224,138 -4,20 -4,204 1604,204 1604,167 1236,10'/>
<polygon style= 'fill:#0000FF;' points='-4,0 -4,20 224,138 800,172 228,128'/>
<polygon style= 'fill:#FF0000;' points='1236,0 800,172 1236,10 1604,167 1604,141'/>

In this example, the gradient will be applied in the Main Separator. Here's a sample end result:

Please do note the following when you add a gradient in your Custom SVG:

Once you add a gradient, you have to define the color on the other parts of your Custom SVG separator. The separator will no longer fetch the colors from the color picker.
Each linearGradient tag created should use a unique ID and has no similarity even with other separators. The ID will always override the other if you apply the same ID as if it is regarded as a whole code.
The required size for Custom Separator should still comply with the size requirement.
If you prefer to use the default separators provided by the plugin, you can copy the SVG Codes through opening the zip file, and look for the \row-separators\lib\svgs.php the complete tag of the separator should be copied in order to work.
Gradients don't apply in the rows where the separator is added. This means that you'll need to apply the gradient differently in the row using CSS. Here's a helpful tool to help you add a gradient both for the SVG and your row's CSS: http://angrytools.com/gradient/
Colors accept names, RGB and Hex Colors. You can choose a color here: https://www.w3schools.com/colors/colors_picker.asp

Here are more examples of Custom SVG Gradients:

Custom SVG with 2 different gradient colors on each shape:

<defs>
<linearGradient id='mountain' gradientTransform='rotate(50)'>
<stop offset='20%' stop-color='#FFFFFF'/>
<stop offset='100%' stop-color='#999999'/>
</linearGradient>
</defs>

<defs>
<linearGradient id='mountain-decor1' gradientTransform='rotate(50)'>
<stop offset='10%' stop-color='#999999'/>
<stop offset='100%' stop-color='#404040'/>
</linearGradient>
</defs>

<polygon fill='url(#mountain-decor1)' points="-4,22 28,64 72,32 200,88 274,62 354,128 526,92 568,132 616,102 674,132 916,132 966,94 1016,128 1046,104 1092,148 1274,120 1304,76 1344,116 1426,68 1502,68 1554,26 1604,62 1604,192 -4,194 "/>
<polygon fill='url(#mountain)' points="1350,134 1164,62 1020,190 800,42 560,184 462,48 258,170 166,6 -4,114 -4,206 1604,204 1604,135 1462,0 "/>
<polygon style= 'fill:#000000;' points="-4,114 167,0 258,158 462,48 258,170 166,6 "/>
<polygon style= 'fill:#000000;' points="560,176 800,42 560,184 "/>
<polygon style= 'fill:#000000;' points="1164,62 1350,134 1462,0 1604,135 1604,144.5 1462,6 1352,150 "/>

Multi-Color Gradient in Custom SVG:

<defs>
<linearGradient id='rainbow' gradientTransform='rotate(50)'>
<stop offset='0%' style='stop-color:rgb(255,0,0);'/>
<stop offset='25%' style='stop-color:rgb(255,255,0);'/>
<stop offset='50%' style='stop-color:rgb(5,193,255);'/>
<stop offset='75%' style='stop-color:rgb(255,255,0);'/>
<stop offset='100%' style='stop-color:rgb(255,0,0);'/>
</linearGradient>
</defs>

<path style= 'fill:#FF99CC;' d="M-40,71.627C20.307,71.627,20.058,32,80,32s60.003,40,120,40s59.948-40,120-40s60.313,40,120,40s60.258-40,120-40s60.202,40,120,40s60.147-40,120-40s60.513,40,120,40s60.036-40,120-40c59.964,0,60.402,40,120,40s59.925-40,120-40s60.291,40,120,40s60.235-40,120-40s60.18,40,120,40s59.82,0,59.82,0l0.18,26H-60V72L-40,71.627z"/>
<path style= 'fill:#FF9999;' d="M-40,83.627C20.307,83.627,20.058,44,80,44s60.003,40,120,40s59.948-40,120-40s60.313,40,120,40s60.258-40,120-40s60.202,40,120,40s60.147-40,120-40s60.513,40,120,40s60.036-40,120-40c59.964,0,60.402,40,120,40s59.925-40,120-40s60.291,40,120,40s60.235-40,120-40s60.18,40,120,40s59.82,0,59.82,0l0.18,14H-60V84L-40,83.627z"/>
<path fill='url(#rainbow)' d="M-40,95.627C20.307,95.627,20.058,56,80,56s60.003,40,120,40s59.948-40,120-40s60.313,40,120,40s60.258-40,120-40s60.202,40,120,40s60.147-40,120-40s60.513,40,120,40s60.036-40,120-40c59.964,0,60.402,40,120,40s59.925-40,120-40s60.291,40,120,40s60.235-40,120-40s60.18,40,120,40s59.82,0,59.82,0l0.18,138H-60V96L-40,95.627z"/>'

For more information about SVG Linear Gradient, please refer to this link:
https://www.w3schools.com/graphics/svg_grad_linear.asp