tellogs.com

グラデーションのCSSコード活用法

グラデーション生成

当ツールで生成されたCSSコードは、background-imageプロパティにそのまま適用できます。linear-gradient()、radial-gradient()、conic-gradient()のいずれも、background-imageの値として記述するのが基本的な使い方です。

生成されたコードをCSSに追加する際、フォールバックの背景色を設定しておくことをおすすめします。グラデーションをサポートしていない古いブラウザ向けに、background-colorで単色を指定しておくと安心です。また、ベンダープレフィックスは現在の主要ブラウザでは不要ですが、レガシーサイト対応ではwebkit接頭辞を追加する場合があります。

複数のグラデーションを重ね合わせるテクニックも便利です。カンマで区切って複数のgradient関数を記述すると、前面のグラデーションが背面のグラデーションに重なります。これにより、複雑なパターンやテクスチャ効果を表現できます。透明度のある色を使用すると、重なり部分の色が混ざり合うため、さらに多彩な表現が可能です。

グラデーション生成を使ってみましょう

このページの内容を、グラデーション生成で実際に試してみましょう。

グラデーション生成を開く