title: CSS Change background color with transition
body: <p>my page has three background colors that change depending on what a div displays (just a word actually).</p>
  
  <p>The colors do change right now, but the transition is not smooth as expected. Colors just change brutally, without a transition operating.</p>
  
  <p>Here is my CSS :</p>
  
  <pre><code>.gradient-low{
  background: #ddd6f3;
  background: -webkit-linear-gradient(to left, #faaca8 , #ddd6f3);
  background: linear-gradient(to left, #faaca8 , #ddd6f3);
  transition-duration: 0.4s;
  }
  
  .gradient-moderate{
  background: #ff6e7f;
  background: -webkit-linear-gradient(to left, #ff6e7f , #bfe9ff);
  background: linear-gradient(to left, #ff6e7f , #bfe9ff);
  transition-duration: 0.4s;
  }
  
  .gradient-high{
  
  background: #EECDA3;
  background: -webkit-linear-gradient(to left, #EF629F , #EECDA3);
  background: linear-gradient(to left, #EF629F , #EECDA3);
  transition-duration: 0.4s;
  }
  </code></pre>
  
  <p>Do you have any suggestions so the change of colour is operated gradually and smoothly ?</p>