title: CSS3. VueJS. Dynamic Transitioning Background Gradients
body: <p>Now I change the gradient based on some logic in the application.</p>
  
  <pre><code>&lt;template&gt;
    &lt;div :style="`background-image: ${backgroundImage}`" class="background"&gt;
      &lt;snackbar /&gt;
      &lt;nuxt /&gt;
      &lt;default-footer /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;style lang="scss"&gt;
  .background {
    min-height: 100vh;
    padding-top: 35px;
    padding-bottom: 75px;
    text-align: center;
    background-image: radial-gradient(circle at 50% 95%, #ffa400, #fd6e6a);
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>But I need to get the gradient changed gradually from one combination of two colors to another.</p>
  
  <p>What is the best way to do this?</p>