How to change body's background for a linear gradient using a fade in effect

Question

I'm trying to get the body's background to change onload for a linear gradient onload event.

I have done this by far:

 $(document).ready(function (){ $("body").addClass("bc"); });

 /*CSS*/ .bc{ transition: background 1s; background: red; /*This actually gets the fade in animation effect*/ /*background: linear-gradient(30deg, red, yellow) This doesn't get the effect*/ }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

I also tried to use Keyframes to change the background for a linear gradient but it changes it sharply

Answer 1

Here you have an example with keyframes animation:

 $(document).ready(function (){ $("body").addClass("bc"); });

 /*CSS*/ @-webkit-keyframes GradientAnimation { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes GradientAnimation { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-o-keyframes GradientAnimation { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes GradientAnimation { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } .bc{ background-color: red; background: linear-gradient(270deg, #e4cc08, #e45708); background-size: 400% 400%; -webkit-animation: GradientAnimation 15s ease infinite; -moz-animation: GradientAnimation 15s ease infinite; -o-animation: GradientAnimation 15s ease infinite; animation: GradientAnimation 15s ease infinite; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

And nice generator for this here: https://www.gradient-animator.com/

Answer 2

Since you cannot add transition on linear-gradient, you may use pseudo element that you make fading and you can easily adjust it's background and also the background of the body to create the needed effect:

 setTimeout(function() { $('body').addClass('bc') }, 500); /*Control the start of fading here */

 /*CSS*/ body { transition: background 5s; background:linear-gradient(60deg, yellow, red); height:100vh; margin:0; } body:before { content: ""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; opacity: 0; transition: opacity 3s; /* control the speed of fading here*/ background: linear-gradient(30deg, red, pink) } body.bc:before { opacity: 1; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

CSS transition works, but it lays an overlay over background. If you have text, which is placed above background, it will be overlaid.

i wrote a solution with jQuery, where you can define colors and order in which they would be changed from one to another:

in the example below, the animation goes from green to purple, and then back to green, and so on, until the animation stops after defined number of seconds

 var stopAfterSec = 23; var speed = 15; var purple = [255, 26, 26]; var green = [26, 255, 118]; var sea_green = [26, 255, 244]; var order = [green, sea_green, purple]; var current = 0; var direction = -1; var color = end_color = order[current]; function updateGradient() { if (color[0] == end_color[0] && color[1] == end_color[1] && color[2] == end_color[2]) { direction = (current > 0 && current < order.length - 1) ? direction : (-1) * Math.sign(direction); current += direction; end_color = order[current]; } $('.animGradientEfron').css({ background: "-webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 1) 0%, rgba(" + color[0] + ", " + color[1] + ", " + color[2] + ", 0.48) 100%)" }); for (var i = 0; i <= 2; i++) { if (color[i] != end_color[i]) { color[i] += Math.sign((end_color[i] - color[i])); } } } jQuery(document).ready(function() { var startGradientAnimation = setInterval(updateGradient, speed); setTimeout(function() { clearInterval(startGradientAnimation); }, stopAfterSec * 1000); });

 .animGradientEfron { position: absolute; top: 25%; left: 0%; width: 100%; height: 50%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="animGradientEfron"></div>

Answer 4

please refer it

 .css {
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat;
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65))), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat;
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat;
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat;
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat;
 height: 200px;

 }
 <div class="css"></div>

Use css gradient over background image