How to apply linear-gradient css to generally any 2 spans that have background color overlapped with each other?

Given Situation

1 .

Say I have 2 spans, both with background-color, and one is inside another (overlapped):

<p>Alpha <span class="highlightTopic">Beta <span class="highlightYellow">Gamma Delta</span> Epsilon</span> Eta</p>

span.highlightYellow {
  background-color: rgba(255, 237, 0, 0.5);
}

span.highlightTopic {
  background-color: rgba(182, 203, 232, 0.5);
}

2 .

They are overlapped, but I want to be able to see both background-color, so I apply

opacity (applied, see above)
linear-gradient (see below)

for the overlapped background-color

span.highlightTopic span.highlightYellow,
span.highlightYellow span.highlightTopic {
  background: linear-gradient(-7deg, rgba(255, 255, 0, 0.5) 50%, rgba(182, 203, 232, 0.5) 50%);
}

3 .

html output:

jsfiddle: script

Problem

4 .

Now lets say, there is more than 2 spans, say 10 spans.

Then the number of my css style for each combination of them will be 45 ($$10:nCr:2 = \sum _{n=1}^{10-1}n = 45$$).

ie: I need 45 of this

span.highlightTopic span.highlightYellow,
span.highlightYellow span.highlightTopic {
  background: linear-gradient(-7deg, rgba(255, 255, 0, 0.5) 50%, rgba(182, 203, 232, 0.5) 50%);
}

5 .

So, How to apply linear-gradient css to generally any 2 spans that have background-color overlapped with each other? (Without specifying 45 different combinations of them.)

Solution

Solution (workaround)

jsfiddle: Highlight Background color Overlap (soln)

1 .

you need a Master class (Css Style Rule)

span.hlBackgroundMs {
  --color-main: aliceblue;
  background-color: var(--color-main);
}

2 .

add the additional Master class to each of the element

<span class="highlightYellowPaint hlBackgroundMs">Linux</span>

3 .

3 .1

add a variable --color-main to the Master class;

3 .2

and use that --color-main for assigning colors, for all the Css Style Rules that were using for highlighting (instead of using background-color)

span.hlBackgroundMs {
  --color-main: aliceblue;
  background-color: var(--color-main);
}
span.highlightYellowPaint {
  --color-main: rgba(255,237,0,0.50);
  /* background-color: rgba(255,237,0,0.50); */
}

4 .

4 .1

pick the color of the outer span & assign it to --color-main-outerspan

4 .2

assign the 2 colors to linear-gradient by using var(--color-main) & var(--color-main-outerspan)

p > span.hlBackgroundMs {
  --color-main-outerspan: var(--color-main);
}
span.hlBackgroundMs > span.hlBackgroundMs {
  background: linear-gradient(-7deg, var(--color-main) 50%, var(--color-main-outerspan) 50%);  
}

limitations & notes::

this may only works for 2 colors

p > span.hlBackgroundMs is used to pick the outer span, which is limited to certain cases

(note: span.hlBackgroundMs:has(> span.hlBackgroundMs) might be better, if your browser supports :has())

more nested (lv 3+) span may not work

the logic is not easy to follow (there might be a better way)

you may just use an alpha with 0 transparency (to simply the work)

pure css (you may use js to achieve this too)

thinking process::

the whole point is to:_

being able to pick the color from the (parent) outer span & the (child) inner span
select the inner span, then assign those 2 colors to linear-gradient of it.

to be able to pick color from alongside (inner/outer span's) Css Style Rule

-> you need to use a variable --color-main
to be able to share the variable with diff alongside Css Style Rule
- (eg: share between highlightContentObject & highlightTechStack),
-> you need to use an additional Master class span.hlBackgroundMs for that element, (to store & share that variable --color-main)
to be able to distinguish the 2 diff color (instead of just picking the inner span 's --color-main all the time)

-> you need to use another variable --color-main-outerspan to store the color from the outer span
to be able to "store the color from the outer span"

-> you need to distinguish the "outer" & "inner" first

->
- p > span.hlBackgroundMs <=> outer
- span.hlBackgroundMs > span.hlBackgroundMs <=> inner
(logic all set, assign the values)

(update)

As the span gets more nested, you may try out the below tricks.

(though, as the nesting gets more complicated, the less reliable are these tricks...)

(the point is to get the color from outer span)

p > span.hlBackgroundMs { --color-main-outerspan: var(--color-main); } span.hlBackgroundMs > span.hlBackgroundMs { background: linear-gradient(-7deg, var(--color-main) 50%, var(--color-main-outerspan) 50%); } p > span > span.hlBackgroundMs { --color-main-outerspan-lv2: var(--color-main); } p > span > span.hlBackgroundMs > span.hlBackgroundMs { background: linear-gradient(-15deg, var(--color-main) 50%, var(--color-main-outerspan-lv2) 50%); } /*p > span > span > span.hlBackgroundMs { --color-main-outerspan-lv3: var(--color-main); } p > span > span > span.hlBackgroundMs > span.hlBackgroundMs { background: linear-gradient(-15deg, var(--color-main) 50%, var(--color-main-outerspan-lv3) 50%); } p > span > span.hlBackgroundMs > span.hlBackgroundMs { background: linear-gradient(-15deg, var(--color-main) 50%, var(--color-main-outerspan-lv3) 50%); } p > span > span.hlBackgroundMs > span.hlBackgroundMs { background: linear-gradient(-15deg, var(--color-main) 50%, var(--color-main-outerspan) 50%); }*/ p > span > span > span > span.hlBackgroundMs { background: linear-gradient(-15deg, var(--color-main) 50%, var(--color-main-outerspan) 50%); }

update:

prev updated css rule is pretty bad
add 4 more solutions: 1 in Javascript, 3 in (pure) Css
the original thinking process is the base of following 3 css methods

// /*
// [V1-M1]
// store the var color as `--color-main-outerspan: var(--color-main);`
// ```
// p > .hlBackgroundMs {
//   --color-main-outerspan: var(--color-main);
// }
// /-* ;not_working; p :not(span.hlBackgroundMs) span.hlBackgroundMs {
//   --color-main-outerspan: var(--color-main);
// }*-/
// .hlBackgroundMs > .hlBackgroundMs {
//   background: linear-gradient(-7deg, var(--color-main) 50%, var(--color-main-outerspan) 50%);
// }
// ```
// the old crappy `p > span > .hlBackgroundMs { --color-main-outerspan-lv2: var(--color-main); }`
// for more nested case
// 
// intrinsic/internal/basic idea is preserved in other methods
// 
// [V1/V2-M2]
// js (simple idea)
// 
// [V2-M3]
// select scope _shallower -> deeper_ + _narrower -> wider_ store var(--color-main) & reverse order assign lineargradient
// 
// [V2-M4]
// select scope _shallower -> deeper_ + _each individual scope(/layer)_ store var(--color-main) & assign lineargradient
// (the most intuitive way)
// 
// [V2-M5]
// select scope _shallower -> deeper_ + _narrower -> wider_ store var(--color-main) & assign lineargradient + inherit
// 
// */

solution js [V1/V2-M2]

@logic:: (straight forward)
1. loop inside each .hlBackgroundMs element
2. store the background-color from all prev parent elements in the same (vertical) branch
3. assign linear-gradient css rule to each element, using those background-color
@note::
- you may need to change some of the parameters in the code, to suit your own case, especially .hlBackgroundMs & 'linear-gradient(-1deg'
- (example source code is not provided (my test cases are bit too many))
  
  (following core source code are left with draft comments not cleaned up)

let det_AllCssFileLoaded = false;
window.onload = function () {
  det_AllCssFileLoaded = true;
};

$(function () {
  // ;Method[use js to fix overlapped background color]; 
  applyLineargradientToElementsWithOverlappedBackgroundColor();
});


async function applyLineargradientToElementsWithOverlappedBackgroundColor() {
  // #>>< wait until css file is loaded
  let i = 1;
  while (!det_AllCssFileLoaded) {
    await new Promise(r => setTimeout(r, 10));
    i++;
    if (i >= 200) {
      console.log('>> while (!det_AllCssFileLoaded && i < 200) @Warning -- reach max loop, css may not be loaded & css rule may be undefined when accessed :: ' + i);
      break;
    }
  }
  
  // ;output-draft; let html_ResultAppend = '';
  // ;output-draft; let hr_1 = '<hr style="border-top: 1px solid #000000;">' + '\n';
  // ;output-draft; let hr_2 = '<hr style="border-top: 1px solid #FCD164;">' + '\n';
  // ;output-draft; let count_BtmLeaf = 0;
  // ;output-draft; let sn_DepthLayer_InRecursion = 0;

  // #>> pick the element that has background color overlapped (view it as a hierachy tree)
  let jqElt_hierachyTop = $('.hlBackgroundMs:has(.hlBackgroundMs):not(.hlBackgroundMs .hlBackgroundMs)');
  
  // #>>> loop + recursion inside each element
  jqElt_hierachyTop.each(function () {
    // ;output-draft; html_ResultAppend += hr_1;
    recursiveFindChildEltThatsOverlappedBackgroundColor_applyLineargradient(this);
  });
  
  // Depth-first search (DFS) -- scan/recursion direction : vertical first, then horizontal
  function recursiveFindChildEltThatsOverlappedBackgroundColor_applyLineargradient(elt_Main, arr_elt_hierachyVerticalLv = []) {
    // ;output-draft; sn_DepthLayer_InRecursion++;
    
    // #>>> fill the vertical branch in each recursion -- once reach bottom, retrive overlapped background color from this array
    arr_elt_hierachyVerticalLv.push(elt_Main);
    
    // #>>> pick the child element under this current elt_Main element
    // the child element must be the not-nested-with-other-.hlBackgroundMs ones
    //   ((direct child wont work, cuz the child element could nest in other tags like <b> <strike>))
    
    // this `selector = '.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs)';`` should work, but no
    // use array subtract instead... 
    // see https://stackoverflow.com/questions/75038754/jquery-find-use-with-not-selector-is-missing-some-elements-the-selector
    let arr_elt_ChildOfCurrMainElt_hierachyHorizontalLv;
    let arr_elt_hierachyAll = $(elt_Main).find('.hlBackgroundMs').toArray();
    let arr_elt_hierachyMidBtm = $(elt_Main).find('.hlBackgroundMs .hlBackgroundMs').toArray();
    let arr_elt_hierachyTop = arr_elt_hierachyAll.filter(function (elt_curr) {
      return !arr_elt_hierachyMidBtm.includes(elt_curr);
    });
    arr_elt_ChildOfCurrMainElt_hierachyHorizontalLv = $(arr_elt_hierachyTop);

    // #>>> loop + recursion inside each child element
    let det_ReachBottom = false;
    let det_DoneWithBottomReachBackToMiddle = false;
    if (arr_elt_ChildOfCurrMainElt_hierachyHorizontalLv.length !== 0) {
      for (let elt_ChildOfCurrMainElt_curr of arr_elt_ChildOfCurrMainElt_hierachyHorizontalLv) {
        recursiveFindChildEltThatsOverlappedBackgroundColor_applyLineargradient(elt_ChildOfCurrMainElt_curr, arr_elt_hierachyVerticalLv);
        // ;output-draft; sn_DepthLayer_InRecursion--;
      }
      det_DoneWithBottomReachBackToMiddle = true;
    } else {
      det_ReachBottom = true;
    }
    // #>> [assign linear-gradient color to the element] @main;
    //   (DSF -- vertical to bottom -> back to middle -> ...
    if (det_ReachBottom || det_DoneWithBottomReachBackToMiddle) { 
      // ;output-draft; count_BtmLeaf++;
      // ;output-draft; html_ResultAppend += hr_2 
      // ;output-draft; html_ResultAppend += '<h4>'
      // ;output-draft; html_ResultAppend += 'sn_DepthLayer_InRecursion : ' + sn_DepthLayer_InRecursion;
      // ;output-draft; if (det_ReachBottom) {
      // ;output-draft;   html_ResultAppend += '<br>\n' + 'count_BtmLeaf : ' + count_BtmLeaf + ' -- btm reached';
      // ;output-draft; }
      // ;output-draft; html_ResultAppend += '</h4>' + '\n';
      
      
      let css_BackgroundImage = getLinearGradientFromHierachyVerticalLv(arr_elt_hierachyVerticalLv);

      // @TP @messy change opacity should be in css, not here
      // css_BackgroundImage = css_BackgroundImage.replace(/(?<beforeOpacity>rgba\(\d{1,3},\s*\d{1,3},\s*\d{1,3},\s*)(?<opacity>\d*\.?\d*)(?<afterOpacity>\))/gm, '$<beforeOpacity>0.8$<afterOpacity>');
      
      $(elt_Main).css({ 'background-image' : css_BackgroundImage });
      
      //
      arr_elt_hierachyVerticalLv.pop();
      return;
    }

  }
  
  function getLinearGradientFromHierachyVerticalLv(arr_elt_hierachyVerticalLv) {
    // 
    let sn_DepthOfLeaf = arr_elt_hierachyVerticalLv.length;
    // ;M1; let posInterval_EvenColorStop_IndexBaseColorEnd = 1 / (sn_DepthOfLeaf - 1); // its about the range / index (either +1 or -1)
    // ;M2; let posInterval_EvenColorStop_IndexBaseWhiteEnd = 1 / (sn_DepthOfLeaf + 1);
    // ;M3;
    let posInterval_EvenColorStop_RangeBase = 1 / sn_DepthOfLeaf;
    let posInterval_MarginOfGradientLeftRight = posInterval_EvenColorStop_RangeBase / 6;

    // 'linear-gradient(-15deg, var(--color-main) 50%, var(--color-main-outerspan) 50%)';
    // @to_use-param
    // let css_BackgroundImage = 'linear-gradient(177deg';
    let css_BackgroundImage = 'linear-gradient(-1deg';

    //
    // let sn_DepthOfLeaf_curr = 0;
    let ind_DepthOfLeaf_curr = -1; // using index, not sn
    for (let elt_hierachyVerticalLv_currRetriveScan of arr_elt_hierachyVerticalLv) {
      ind_DepthOfLeaf_curr++;

      let css_varColorMain_eltMain = $(elt_hierachyVerticalLv_currRetriveScan).css('--color-main');

      // ;M1; css_BackgroundImage += ', ' + css_varColorMain_eltMain + ' ' + (ind_DepthOfLeaf_curr * posInterval_EvenColorStop_IndexBaseColorEnd * 100 + '%');
      // ;M3;
      css_BackgroundImage += ', ' + css_varColorMain_eltMain + ' ' 
        + ((ind_DepthOfLeaf_curr * posInterval_EvenColorStop_RangeBase + posInterval_MarginOfGradientLeftRight) * 100 + '%') + ' ' 
        + (((ind_DepthOfLeaf_curr + 1) * posInterval_EvenColorStop_RangeBase - posInterval_MarginOfGradientLeftRight) * 100 + '%') ;
      // 1 the stops are (say 3 colors)
      // either |-| start 0% + mid 50% + end 100%
      // or |-| white 0% + color1 25% + color2 50% + color3 75% + white 100%
      // or |-| 0% + color1 + 33% + color2 + 66% + color3 + 99%
      // element.style {
      //   background-image: linear-gradient(170deg, rgba(230, 181, 255, 0.5) 5.55556%, rgba(230, 181, 255, 0.5) 27.7778%, rgba(157, 255, 201, 0.5) 38.8889%, rgba(157, 255, 201, 0.5) 61.1111%, rgba(126, 220, 255, 0.5) 72.2222%, rgba(126, 220, 255, 0.5) 94.4444%);
      // }
      
      // this posInterval_EvenColorStop_RangeBase 
      // its not:_ doesnt go to 1 index pos, then move left right
      // its:_  go to 2 index pos, then move right left
      // 
      // [[ 4 index left-bounded, slices into 4 range, with 5 index leftright-bounded == 3 index with no-bounded
      // [[ index can be real index of the range / the middle of the range 
      // 
      // //repeat-from[css]-to[js]
      // diff alg than in js for slicing, here
      // 2 color -> divide by 4 -> pick from 1, jump to 3
      // 3 color -> divide by 6 -> pick from 1, jump to 3, jump to 5

      // ;output-draft; let classCss_eltMain = elt_hierachyVerticalLv_currRetriveScan.getAttribute('class');
      // ;output-draft; html_ResultAppend += css_varColorMain_eltMain + '<br>\n';
      // ;output-draft; html_ResultAppend += classCss_eltMain + '<br>\n';
      // ;output-draft; html_ResultAppend += elt_hierachyVerticalLv_currRetriveScan.outerHTML + '<br>\n';
    }
    // ;output-draft; html_ResultAppend += '<br>\n';

    //
    css_BackgroundImage += ')';

    return css_BackgroundImage;
  }
  

  // ;output-draft; //
  // ;output-draft; document.body.insertAdjacentHTML('beforeend', html_ResultAppend);
  
}

solution css [V2-M3] (not recommended)

@logic (see code comment. idea is pretty straight forward (based on the original thought posted before above), but implementation is tricky)

/*
@logic::
for all `.hlBackgroundMs` (overlapped) elements
1. 
1.1
store the outer parent element es `var(--color-main)`
1.2
since you cannot directly select the outer parent element, 
you select the hierachy top parent elements first, then 
you select the hierachy top parent elements + hierachy lv2 parent elements, then 
you select the hierachy top parent elements + hierachy lv2 parent elements + hierachy lv3 parent elements, then 
... 
1.3
( 
<strike> ~~// dont worry about:_ there is no overwrite values, each lv preserves the prev lv es `var(--color-main)`
<strike> ~~// and can access the that prev lv es `var(--color-main)`, 
<strike> ~~// <strike> cuz the scope is widen -- 
<strike> ~~// <strike> element in curr lv is also included in the prev lv
<strike> ~~// [[ here, I rt, dont think about elements in Set, imean elements under the parent element scope... ]]
1.
the widen of scope is not a desire effect (it just happens to be it, no other way)
2.
the point is:_ child elements BB inside a parent element AA, can inherit css rules from AA
3.
there is no worry about having css var overwritten (-- as the code shows)
-- imean, 
  even if its a widen scope in the next lv, as long as you dont change that var, it stays there
  -- ( also
  it doesnt matter that `--color-main-hierachylv1` is stored in 
     |-| a narrower scope `.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs) {` 
  or |-| a wider scope `.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs) {`
  as long as you can access to that var (that correct value), its fine.
  )
4.
dont worry about being overselect -- cuz the scope is widen, an element in lv3 would be selected by more widen scope 
4.2
note that, though the scope widen -- it goes into more nested (its amount vs depth) -- (narrower -> wider (shallow -> deep))
  [[
  aga such "select widen" is bit counter-intuitive
  the mixture of how css file scan apply & element focus & inherit & css selector limitation make this messy 

  normally idealy, should be either following:
  1.
    -
      select lower scopes (sum of all lower layers) + deeper
      so sth like
      .hlBackgroundMs {
        --color-main-hierachylv1: var(--color-main);
      }
      .hlBackgroundMs .hlBackgroundMs {
        --color-main-hierachylv2: var(--color-main);
      }
    -
      but this will overwrite the prev scope es `--color-main-hierachylv1`

      dont think of:_ 
      the css file apply the rules "once" (like, just scan&apply the css file once), and below rules overwrite the above rule

      should think of:_ 
      first focus on an element, then check its class, then check the css rule -- then scan&apply from that position 

    - eg:
      you may think of:_
      .hlBackgroundMs {
        --color-main-hierachylv1: var(--color-main);
      }
      applied once to all elements, done, 

      .hlBackgroundMs .hlBackgroundMs {
        --color-main-hierachylv2: var(--color-main);
      }
      applied once to all lv2+ elements
      -- lv2 eleemnts get rules assigned from here to below 
      -- `.hlBackgroundMs {` wont be exec to lv2 elements -- cuz its already executed once
      ->
      that is wrong
      -- `.hlBackgroundMs {` also applies to lv2+ elements 
      -- this overrides the inherited `--color-main-hierachylv1` from parent element 
        [[note: override inherited, not overwrite itself-already-has -- said, the rules is about inherit from parent element, not inherit from prev self / left exist (globalish?<) css rule [[or sth like that, cc...]]]]
        [[ dk, miss, or sufficient, logic-flow, the best self logic emmm 
        not just side effect, conflict, concrete solid concept, compare 
        dk ..
        [[ ((aga, css rule, file once, element multi, inherit, self / prev apply / left exist
  2. 
    select each scope (individually, at its own layer) + deeper 
    - css selector limitation -- you cannot just simply select parent element
  ]]

so, `--color-main-hierachylv6` is actually color value of elements nested deeply, 
its not for wider elements
though, the elements in wider scope does get assigned with `--color-main-hierachylv6: var(--color-main);` 
they will not use it

this is guaranteed in the "reverse order (wider -> narrower when assign lineargradient css rule)"
the `--color-main-hierachylv6: var(--color-main);` in wider scope css rule will be overwritten by narrower scope css rule
(and the further narrower scope css rule will not apply -- simply cuz this element is not that must nested)
)

2.
2.1
since the scope is widen, 
you cannot directly apply css rule while assigning `var(--color-main)`
-> otherwise, you will overwrite all the css rule in prev narrower scope with the css rule in the wider scope 
-- results in a undesired-long `linear-gradient` with blank `--color-main-hierachylv6`

->
so, you need to separate out the css rules, and
apply the rules in reverse order (wider -> narrower when assign lineargradient css rule)

2.2
(note, now you are in reversed order -> prev scope is wider, not narrower)

:not(.dummyPriorityClassNonexist)
is to increase the css rule priority in narrower scope, 
since the prev wider scope has higher priority, due to more classes in `:not(`
even though the curr narrower scope is written below it

*/


/* narrower -> wider (shallow -> deep) when store css var var(--color-main)  */
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs) { /* hierachy top -- the .hlBackgroundMs elements that are at the top -- not nest inside any other .hlBackgroundMs */
  --color-main-hierachylv1: var(--color-main);
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs) { /* hierachy top + hierachy lv2 */
  --color-main-hierachylv2: var(--color-main);
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs) { /* hierachy top + hierachy lv2 + hierachy lv3 */
  --color-main-hierachylv3: var(--color-main);
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs) {
  --color-main-hierachylv4: var(--color-main);
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs) {
  --color-main-hierachylv5: var(--color-main);
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs) {
  --color-main-hierachylv6: var(--color-main);
}
/* wider -> narrower (deep -> shallow) when assign lineargradient css rule */
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs):not(.dummyPriorityClassNonexist) {
  --lineargradient-deg: -1deg;
  /* ;not_need; background: initial; */ /* seems require, otherwise background-color coexist; dk, but actually, not remove makes look more obvious (better) */
  background-image: linear-gradient(var(--lineargradient-deg), var(--color-main-hierachylv1) calc(8.33% - 8%) calc(8.33% + 8%), var(--color-main-hierachylv2) calc(25% - 8%) calc(25% + 8%), var(--color-main-hierachylv3) calc(41.66% - 8%) calc(41.66% + 8%), var(--color-main-hierachylv4) calc(58.33% - 8%) calc(58.33% + 8%), var(--color-main-hierachylv5) calc(75% - 8%) calc(75% + 8%), var(--color-main-hierachylv6) calc(91.66% - 8%) calc(91.66% + 8%));
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs):not(.dummyPriorityClassNonexist):not(.dummyPriorityClassNonexist) {
  background-image: linear-gradient(var(--lineargradient-deg), var(--color-main-hierachylv1) calc(10% - 10%) calc(10% + 10%), var(--color-main-hierachylv2) calc(30% - 10%) calc(30% + 10%), var(--color-main-hierachylv3) calc(50% - 10%) calc(50% + 10%), var(--color-main-hierachylv4) calc(70% - 10%) calc(70% + 10%), var(--color-main-hierachylv5) calc(90% - 10%) calc(90% + 10%));
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs):not(.dummyPriorityClassNonexist):not(.dummyPriorityClassNonexist):not(.dummyPriorityClassNonexist) {
  background-image: linear-gradient(var(--lineargradient-deg), var(--color-main-hierachylv1) calc(12.5% - 10%) calc(12.5% + 10%), var(--color-main-hierachylv2) calc(37.5% - 10%) calc(37.5% + 10%), var(--color-main-hierachylv3) calc(62.5% - 10%) calc(62.5% + 10%), var(--color-main-hierachylv4) calc(87.5% - 10%) calc(87.5% + 10%));
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs):not(.dummyPriorityClassNonexist):not(.dummyPriorityClassNonexist):not(.dummyPriorityClassNonexist):not(.dummyPriorityClassNonexist) {
  background-image: linear-gradient(var(--lineargradient-deg), var(--color-main-hierachylv1) calc(16.66% - 15%) calc(16.66% + 15%), var(--color-main-hierachylv2) calc(50% - 15%) calc(50% + 15%), var(--color-main-hierachylv3) calc(83.33% - 15%) calc(83.33% + 15%));
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs):not(.dummyPriorityClassNonexist):not(.dummyPriorityClassNonexist):not(.dummyPriorityClassNonexist):not(.dummyPriorityClassNonexist):not(.dummyPriorityClassNonexist) {
  background-image: linear-gradient(var(--lineargradient-deg), var(--color-main-hierachylv1) calc(25% - 20%) calc(25% + 20%), var(--color-main-hierachylv2) calc(75% - 20%) calc(75% + 20%));
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs):not(.dummyPriorityClassNonexist):not(.dummyPriorityClassNonexist):not(.dummyPriorityClassNonexist):not(.dummyPriorityClassNonexist):not(.dummyPriorityClassNonexist):not(.dummyPriorityClassNonexist) {
  /* ;not_need; background-image: unset; */
  background-color: var(--color-main-hierachylv1);
}

solution css [V2-M4] (recommended)

.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs) { /* hierachy top -- the .hlBackgroundMs elements that are at the top -- not nest inside any other .hlBackgroundMs */
  --lineargradient-deg: -1deg;
  --color-main-hierachylv1: var(--color-main);
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs):not(.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs)) { /* hierachy lv2 */
  --color-main-hierachylv2: var(--color-main);
  background-image: linear-gradient(var(--lineargradient-deg), var(--color-main-hierachylv1) calc(25% - 20%) calc(25% + 20%), var(--color-main-hierachylv2) calc(75% - 20%) calc(75% + 20%));
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs):not(.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs)) { /* hierachy lv3 */
  --color-main-hierachylv3: var(--color-main);
  background-image: linear-gradient(var(--lineargradient-deg), var(--color-main-hierachylv1) calc(16.66% - 15%) calc(16.66% + 15%), var(--color-main-hierachylv2) calc(50% - 15%) calc(50% + 15%), var(--color-main-hierachylv3) calc(83.33% - 15%) calc(83.33% + 15%));
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs):not(.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs)) {
  --color-main-hierachylv4: var(--color-main);
  background-image: linear-gradient(var(--lineargradient-deg), var(--color-main-hierachylv1) calc(12.5% - 10%) calc(12.5% + 10%), var(--color-main-hierachylv2) calc(37.5% - 10%) calc(37.5% + 10%), var(--color-main-hierachylv3) calc(62.5% - 10%) calc(62.5% + 10%), var(--color-main-hierachylv4) calc(87.5% - 10%) calc(87.5% + 10%));
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs):not(.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs)) {
  --color-main-hierachylv5: var(--color-main);
  background-image: linear-gradient(var(--lineargradient-deg), var(--color-main-hierachylv1) calc(10% - 10%) calc(10% + 10%), var(--color-main-hierachylv2) calc(30% - 10%) calc(30% + 10%), var(--color-main-hierachylv3) calc(50% - 10%) calc(50% + 10%), var(--color-main-hierachylv4) calc(70% - 10%) calc(70% + 10%), var(--color-main-hierachylv5) calc(90% - 10%) calc(90% + 10%));
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs):not(.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs)) {
  --color-main-hierachylv6: var(--color-main);
  background-image: linear-gradient(var(--lineargradient-deg), var(--color-main-hierachylv1) calc(8.33% - 8%) calc(8.33% + 8%), var(--color-main-hierachylv2) calc(25% - 8%) calc(25% + 8%), var(--color-main-hierachylv3) calc(41.66% - 8%) calc(41.66% + 8%), var(--color-main-hierachylv4) calc(58.33% - 8%) calc(58.33% + 8%), var(--color-main-hierachylv5) calc(75% - 8%) calc(75% + 8%), var(--color-main-hierachylv6) calc(91.66% - 8%) calc(91.66% + 8%));
}

solution css [V2-M5]

.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs) { /* hierachy top -- the .hlBackgroundMs elements that are at the top -- not nest inside any other .hlBackgroundMs */
  --color-main-hierachylv1: var(--color-main);
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs) { /* hierachy top + hierachy lv2 */
  --color-main-hierachylv1: inherit;
  --color-main-hierachylv2: var(--color-main);
  background-image: linear-gradient(var(--lineargradient-deg), var(--color-main-hierachylv1) calc(25% - 20%) calc(25% + 20%), var(--color-main-hierachylv2) calc(75% - 20%) calc(75% + 20%));

}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs) { /* hierachy top + hierachy lv2 + hierachy lv3 */
  --color-main-hierachylv1: inherit;
  --color-main-hierachylv2: inherit;
  --color-main-hierachylv3: var(--color-main);
  background-image: linear-gradient(var(--lineargradient-deg), var(--color-main-hierachylv1) calc(16.66% - 15%) calc(16.66% + 15%), var(--color-main-hierachylv2) calc(50% - 15%) calc(50% + 15%), var(--color-main-hierachylv3) calc(83.33% - 15%) calc(83.33% + 15%));
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs) {
  --color-main-hierachylv1: inherit;
  --color-main-hierachylv2: inherit;
  --color-main-hierachylv3: inherit;
  --color-main-hierachylv4: var(--color-main);
  background-image: linear-gradient(var(--lineargradient-deg), var(--color-main-hierachylv1) calc(12.5% - 10%) calc(12.5% + 10%), var(--color-main-hierachylv2) calc(37.5% - 10%) calc(37.5% + 10%), var(--color-main-hierachylv3) calc(62.5% - 10%) calc(62.5% + 10%), var(--color-main-hierachylv4) calc(87.5% - 10%) calc(87.5% + 10%));
}

// omitted due to Stackoverflow length restriction