とある案件で『変革を表現するために球体をアニメーションさせる』という指令が下りました。
当初はアニメーションパスSVG + グラデーション背景を使用して、図形のカタチ自体を変化させる想定でしたが、紆余曲折あり最終的には表題の仕様(球体の色を変化させる)で落ち着きました。

ですが、球体の表現自体がなかなか難易度高いです。
とりあえず円形グラデーションを付けてみました…なんとなく立体的には見えますが
のっぺり感は否めません…

@keyframes radialGrad{
  0%{background:radial-gradient(#3af5ca 1%,#013c63 20%,#65f5f6 70%)}
  50%{background:radial-gradient(#3af5ca 1%,#013c63 2%,#65f5f6 50%)}
  100%{background:radial-gradient(#3af5ca 1%,#013c63 20%,#65f5f6 70%)}
}

さらに css によるグラデーション(円形・線形問わず)の場合、上記のように animationプロパティで動かそうと思っても、滑らかな動きにはなりません。

この時点で 詰んだ ように感じますが、たいていの問題は『発想の転換』と『誤魔化し能力』でどうにかなるものです。
あくまでも技術力ではなく『誤魔化し能力』です！
実際、経験上だいたい ソレ で乗り越えてきました。

ということで、グラデーションの値を可変させてアニメーションするのではなく、円形グラデーション背景を大きめに配置して、animationプロパティで背景位置をアニメーションするという手法で実装を試みました。

.radialGrad{
  background:radial-gradient(#3af5ca 1%,#013c63 20%,#65f5f6 70%);
  background-size:400% 400%;
  animation:radialGrad 16s ease infinite;
}
@keyframes radialGrad{
  0%{background-position:25% 100%}
  50%{background-position:44% 55%}
  100%{background-position:25% 100%}
}

該当部分を抜粋したものが上記になります。

『色の変化』という点では条件をクリアしているように見えますが、パッと見の印象としては残念な感じに思えます。
のっぺり感がさらに加速したのと、球体の立体表現が落ちたと言えます。。。なかなか難しいものです
球体自体の大きさに対して、円形グラデーションの中心点が動けば動くほど、アール部分に違いが出てくるので、違和感が増すのも当然です。

で、最終的な着地点が下記になります、ドーーーーーーン。

.linearGrad span::before,
.linearGrad span::after{
  content:'';
  display:block;
  position:absolute;
  border-radius:50%;
}
.linearGrad span::before{
  width:25px;
  height:25px;
  top:20%;
  right:20%;
  background:#fff;
  z-index:2;
  filter:blur(10px);
}
.linearGrad span::after{
  width:160px;
  height:160px;
  top:3px;
  right:3px;
  background:transparent;
  z-index:1;
  filter:blur(12px);
  box-shadow:inset 5px -5px 0 2px #005a96;
}

違和感を抑えるために円形ではなく、線形グラデーションに変更し、さらに球体自体が立体的に見えるように疑似要素を使って光彩・影を追加しました。
before要素には、白い円にボカシをかけ、右上に配置
after要素には、背景色を透過し、内側光彩をかけ、強めにボカシをかけ、before要素の対角線上に配置

『色の変化』と『球体の立体表現』が、ある程度のレベルで実装できているように感じます。
cssのみで絵画・アニメーションした割には、イイ線いっているかと٩(๑❛ᴗ❛๑)۶

最終的に【チカラワザ万歳】ということで Q.E.D.？ｗ