これはうつくしいグラデーションです

これはうつくしいグラデーションです
目次

グラデーション

朝焼けか何かですか

CSS

background-image:linear-gradient(-45deg,rgba(238,119,82,.8),  rgba(253,219,146,.8)25%, rgba(209,253,254,.8));

参考サイト

https://front-end-tools.com/generategradient/

グラデーションを動かす

CSS

  background: linear-gradient(-45deg,rgba(238,119,82,.8),  rgba(253,219,146,.8)25%, rgba(209,253,254,.8));
  background-size: cover;
  background-size: 400% 400%;
  -webkit-animation: Grad 30s ease infinite;
  -moz-animation: Grad 30s ease infinite;
  animation: Grad 30s ease infinite;

CSS Animation

@-webkit-keyframes Grad {  
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}
@-moz-keyframes Grad {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}
@keyframes Grad {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}

参考サイト

https://nakox.jp/web/wordpress/lion_media_header

参考サイトのグローバルナビが素敵でしたのでそのまま使用させてもらいました！

強い色のグラデーションをこんなふうに使うのかわいい。
各所ラインも同じグラデにしたら動きが合ってて良いです。