title: change the background color based on the position of the elements dynamically
body: <p>I have three simple div in my webpage</p>
  
  <pre><code>&lt;div class="box"&gt;
      DIV A
  &lt;/div&gt;
  &lt;div class="box"&gt;
      DIV B
  &lt;/div&gt;
  &lt;div class="box"&gt;
      DIV C
  &lt;/div&gt;
  </code></pre>
  
  <p>I would like to know if it is possible (using only css) assigning to 3 (or more) div (with same class selector) a background color by setting a start color  and then change the saturation from time to time until the last div.</p>
  
  <p>What I am doing now is setting for each div the <code>background-color</code> property but these elements are generated dinamically and I don't know how many they are.</p>
  
  <p>Image example of what I would reach.</p>
  
  <p><img src="https://i.stack.imgur.com/xbflw.png" alt="enter image description here"></p>
  
  <p>setting somethink like</p>
  
  <pre><code>.box{
     background-color:#123456;
  }
  </code></pre>
  
  <p>and</p>
  
  <pre><code>.box:nth-child(n){
     background-color-add:#000001;
  }
  </code></pre>
  
  <p>in this way background-color of <code>n</code>-th element will be always different from <code>n+1</code>-th background.</p>
  
  <p>My question is : 
  <br/>Is it possible?<br/> if yes how?</p>