CSSのみで色が変化する背景グラデーションを作成する方法

css-gradient-animation
  • URLをコピーしました!

CSSのみで実現する背景グラデーションは既に世の中に知れ渡っていて作成ツールまでありますが、そのを次々と変化させることもできます。
CSS詳しい方なら想像できると思いますが、グラデーションアニメーションをミックスします。

背景グラデーションとは、背景色が徐々に別の色に変化する効果のことです。
CSSのみで背景グラデーションを作成するには、backgroundプロパティにlinear-gradient()関数radial-gradient()関数を使います。
これらの関数は、グラデーションの方向や形、色の変化点などを指定できます。

目次

CSSの書き方

グラデーションの基本的な設定例

例えば、以下のCSSコードは、左上から右下に向かって赤から青に変化する背景グラデーションを作成します。

linear-gradient()関数第一引数には、グラデーションの方向を指定します。
to bottom rightとすると、左上から右下に向かってグラデーションが作られます。

第二引数以降には、グラデーションを指定します。redblueとすると、赤から青に変化します。
色の間には自動的にスムーズな遷移が作られますが、変化点を明示的に指定することもできます。
例えば、red 20%, blue 80%とすると、赤から青への変化が20%から80%の範囲で起こります。

グラデーションの方向を変える(応用編)

radial-gradient()関数は、円形や楕円形のグラデーションを作成します。
第一引数には、グラデーションサイズ、中心位置を指定します。
第二引数以降には、グラデーションを指定します。

例えば、以下のCSSコードは、中心が画面の中央で半径が50%の円形グラデーションを作成します。
白から黒に変化します。

circle 50%とすると、円形グラデーション半径が50%になります。
at centerとすると、中心が画面の中央になります。
whiteblackとすると、白から黒に変化します。

その他の設定例とサンプル

以前からリスペクトしているWebクリエイターボックスさんのサイトがすごく参考になります。
ソースコードも付いていますので、とてもわかりやすと思います。

CodePenを拝借。

See the Pen Colourful gradient animation by Mana (@manabox) on CodePen.

実際に4月1日の記事で利用しているサンプルがありますのでご覧ください。

作成ツール

参考サイトにも紹介されていた、こちらのサイトで簡単に作成できます。
背景にしたいと、角度、それから変更スピードを選択するだけで作成できます。

グラデーション背景画像を入れたり、透過も駆使することで、あなたのサイトをもっとカッコイイ背景に変更しましょう!

以上がCSSのみで変化する背景グラデーションを作成する方法です。
CSSコードを試してみてください。

著:おのれいこ, 著:栗谷 幸助, 著:相原 典佳, 著:塩谷 正樹, 著:中川 隼人
¥2,750 (2024/07/05 19:18時点 | Amazon調べ)
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次