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

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:

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:

<linearGradient id='gradient' gradientTransform='rotate(50)'>
<stop offset='0%' stop-color='#FFFFFF'/>
<stop offset='100%' stop-color='#000000'/>
  • 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)"


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

<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:
  • Colors accept names, RGB and Hex Colors. You can choose a color here:

Here are more examples of Custom SVG Gradients:

Custom SVG with 2 different gradient colors on each shape:

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

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

<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:

<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);'/>

<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: