How to Animate a Radial-Gradient Using Css

How to animate a radial-gradient using CSS?

You can do the gradient differently and animate the position. The trick is to double the size of the gradient and make the value of color stop half of their actual values so you keep the same visual gradient then you can animate it from left to right.

It won't look exactly the same as the gradient you defined in the animation due to the calculation of farthest-corner.

#shine-div {
  height: 30vh;
  width: 60vw;
  margin-right: auto;
  margin-left: auto;
  border-radius: 10px;
  background: radial-gradient(farthest-corner at top, #FFFFFF 0%, #ffb3ff 4%, #ff33ff 12.25%, #800080 31.25%, #b300b3 50%) top right/200% 200%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  animation: colorChange 5s infinite alternate;
}

@keyframes colorChange {
  to {
    background-position:top left;
  }
 }

<div id="shine-div">
  Shine
</div>

CSS animation not smooth with radial-gradient background

You need to animate the background-size

.box {  width: 200px;  height: 200px;  background: radial-gradient(farthest-side,black, transparent) center no-repeat;  animation:pulse 2s linear infinite alternate;}@keyframes pulse{  from {    background-size:50% 50%;  }  to {    background-size:100% 100%;  }}

<div class="box"></div>

How do I animate a CSS gradient stop with a smooth transition to transparent?

This as of Dec 03 2020 only works on Chrome or Edge 95+

One can animate the gradient using CSS @property.

@property --opacity {
  syntax: '<percentage>';
  initial-value: 100%;
  inherits: false;
}

.test {
    display: inline-block;
    position: absolute;
    border-radius: 100%;
    background-image: conic-gradient(
        red var(--opacity),
        red 10%,
        rgba(255, 0, 0, var(--opacity)),
        transparent,
        transparent
    );
    will-change: transform, background-image;
    width: 200px;
    height: 200px;
    mask:radial-gradient(circle, transparent 47%, white calc(47% + 1px));
    -webkit-mask:radial-gradient(circle, transparent 47%, white calc(47% + 1px));

    animation:
        conic-gradient
            4.5s
            ease-out
            0s
            infinite
            none
            running;
}

@keyframes conic-gradient {
    50% {
        --opacity: 0%;
    }

    85% {
        --opacity: 100%;
    }
}

<div class="test"></div>

Radial Gradient CSS Transition

No, you can't have both on one element since gradients are rendered as background-images:
https://www.w3schools.com/css/css3_gradients.asp

You could put a transparent element above (z-index) the one with the image that changes opacity on hover.

Also, gradients still aren't transitionable, but as I mentioned you can work with opacity. Or try animating SVGs

animate radial-gradient CSS3 : move from left to right?

"but we can see the border of "square" where is the light radial" - Why use radial background at all, simply use:

div

div {  position: absolute;  width: 250px;  height: 250px;  background-color: black;  background-image: url(http://frontend.lostboys.nl/presenations/Icons-fonts/img/chrome.png);  overflow: hidden;}div:after {  content: "";  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background: rgb(255, 255, 255);  background: linear-gradient(    90deg,    rgba(250, 250, 250, 0) 0%,    rgba(250, 250, 250, 0.5) 60%,    rgba(250, 250, 250, 0) 100%  );  -webkit-animation: animation 3s ease-in-out infinite;}@-webkit-keyframes animation {  from {    left: -250px;  }  to {    left: 250px;  }}

<div></div>

Keyframes - gradient background is not animated

Unfortunately, background gradients are not animatable

Luckily for you, your current desing doesn't need to animate the gradient, since the external color is constant.

Just make the gradient transparent, and set a solid changing color underneath

#mydiv {  width: 100%;  height: 600px;  position: relative;  overflow: hidden;  animation: background-gradient 5s;  animation-iteration-count: infinite;  backface-visibility: hidden;  animation-timing-function: ease-in-out;  background-image: radial-gradient(circle at 90% 80%, transparent, #4d0019);}
@keyframes background-gradient {  0% {    background-color: #ff0000;  }  25% {    background-color: yellow;  }  50% {    background-color: #3333cc;  }  75% {    background-color: #00ffcc;  }  100% {    background-color: #cc9900;  }}

<div id="mydiv"></div>

How to animate linear-gradient from top left to bottom right?

Youn need to adjust the gradient then consider percentage value to have a better effect:

.Box {
  height: 100px;
  width: 100px;
  margin: 16px;
  background: #f6f7f8;
  border-radius: 50%;
}
.Shine {
  display: inline-block;
  background: 
    linear-gradient(to bottom right, #eeeeee 40%, #dddddd 50%, #eeeeee 60%);
  background-size:200% 200%;
  background-repeat: no-repeat;
  animation:placeholderShimmer 2s infinite linear;
}

@keyframes placeholderShimmer {
  0% {
    background-position:100% 100%; /*OR bottom right*/
  }

  100% {
    background-position:0 0; /*OR top left*/
  }
}

<div class="Shine">
 <div class="Box"></div>
</div>

How to animate a ripple effect of a gradient flowing across a background image in CSS

Are you looking for something like below:

body {  margin:0;  height:100vh;  background:    linear-gradient(to right,transparent 33%,white,transparent 66%),    url(https://picsum.photos/id/10/800/800) center;  background-size:300% 100%,cover;  animation:change 2s linear infinite;}
@keyframes change {  from { /*Use "to" to change the direction */    background-position:right,center;  }}
html { background:#fff;}

How do I center the linear gradient animation as it zooms it?

Don't animate width/height, animate the background-size

body {
  background-color: black;
  color: white;
  margin: 0;
}

.align {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(80px, 20vmin));
  grid-auto-rows: minmax(80px, 20vmin);
  grid-gap: 10px;
}

.container > div {
  border: 2px solid white;
}

@keyframes anim1 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}

.anim1 {
  animation: anim1 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  background-size: 100% 3000%;
  background-image: linear-gradient(
    to bottom,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet,
    indigo,
    blue,
    green,
    yellow,
    orange,
    red
  );
  border-radius: 10px;
}

@keyframes anim2 {
  100% {
    background-size: 1000% 1000%;
  }
}

.animcontain {
  overflow: hidden;
  border-radius: 50%;
  background-image: radial-gradient(
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
  background-size: 100% 100%;
  background-position:center;
  animation: anim2 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

<div class="align">
    <div class="container">
      <div class="anim1"></div>
      <div class="animcontain">
      </div>
      <div class="anim3"></div>
    </div>
 </div>

Animating Linear Gradient using CSS

Please try this code:

#gradient{    height:300px;    width:300px;    border:1px solid black;    font-size:30px;    background: linear-gradient(130deg, #ff7e00, #ffffff, #5cff00);    background-size: 200% 200%;
    -webkit-animation: Animation 5s ease infinite;    -moz-animation: Animation 5s ease infinite;    animation: Animation 5s ease infinite;}
@-webkit-keyframes Animation {    0%{background-position:10% 0%}    50%{background-position:91% 100%}    100%{background-position:10% 0%}}@-moz-keyframes Animation {    0%{background-position:10% 0%}    50%{background-position:91% 100%}    100%{background-position:10% 0%}}@keyframes Animation {     0%{background-position:10% 0%}    50%{background-position:91% 100%}    100%{background-position:10% 0%}}

<html><div id="gradient">  Hello</div></html>

How to Animate a Radial-Gradient Using Css