背景グラデーションのアニメーションをCSSで作成する方法

アイキャッチ色イメージ CSS

animationプロパティを使ったCSSだけで動くグラデーションのアニメーション作成方法です。
背景グラデーションのアニメーションをCSSで作成する方法
動きが付くだけでWEBサイトの雰囲気が変わります。今回は背景にグラデーションのアニメーションを指定する方法ですがヘッダーやフッターに付けたり、投稿記事の一部分だけに設定したりと応用が利くと思います。

CSS GRADIENT ANIMATOR というサイトで生成したCSSコードを利用しています。

「CSS GRADIENT ANIMATOR」
https://www.gradient-animator.com/
このサイトはブラウザ上で変化するグラデーションアニメーションのCSSコードを簡単に作成することが可能です。角度、スピード、配色、スピードがプレビューを見ながら細かく調整できます。
スポンサーリンク

グラデーションアニメーション背景

背景グラデーションのアニメーションをCSSで作成する方法

body {
background: linear-gradient(270deg, #d0df00, #348117, #2bdbe4, #26768e, #330bd7);
background-size: 1000% 1000%;

-webkit-animation: bg-gradation 30s ease infinite;
animation: bg-gradation 30s ease infinite;
}

@-webkit-keyframes bg-gradation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes bg-gradation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

デモはこちら

コード参考元>美しいグラデーションをCSSで実装!配色に使える便利ツールや実例も! | Webクリエイターボックス
https://www.webcreatorbox.com/tech/css-gradient

 

背景に画像を設定して透過グラデーションアニメーションを上に配置

背景グラデーションのアニメーションをCSSで作成する方法
bodyの背景に画像を配置して、その上のdivの背景にグラデーションアニメーションを設定。下にある画像が見えるようにグラデーションは透過させています。

body {
background-image: url(背景画像URL);
position: relative;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.gradation {
 height: 100%;
background: linear-gradient(270deg, #d0df0061, #3481175e, #2bdbe473, #26768e70, #330bd766);
background-size: 1000% 1000%;

-webkit-animation: bg-gradation 30s ease infinite;
animation: bg-gradation 30s ease infinite;
}

@-webkit-keyframes bg-gradation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes bg-gradation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
<!-- HTML -->
<body>
<div class="gradation">
</div>
</body>

デモはこちら

コード参考元CSSで背景に動くアニメーションをつける方法・ツール【めちゃ簡単】 | Tarokenlog
https://taroken.org/css-gradient-animator/

 

色や透過はお好みに合わせて調整してください。

animationプロパティ、@keyframes(@-規則)についての解説記事も書きました。良かったら合わせてご覧ください↓

タイトルとURLをコピーしました