CSS3で複数色のグラデーション（マルチカラーグラデーション）を実装する方法
CSS3では、linear-gradient() 関数に複数の色をカンマ区切りで指定するだけで、2色以上を使った「マルチカラーグラデーション」を簡単に実装できます。色の数に制限はなく、赤・オレンジ・黄・緑・青など、好きなだけ色を並べることが可能です。
複数色グラデーションの基本構文
基本の書き方は以下のとおりです。色を並べる順序がそのままグラデーションの流れになります。
background: linear-gradient(色1, 色2, 色3, ...);また、各色の後にパーセントやピクセル値を指定すると、色が切り替わる位置（カラーストップ）を細かく制御することもできます。
実装例
以下のコードでは、赤から始まり、オレンジ・黄・赤・青・緑・ピンクへと変化する7色のグラデーションを持つ要素を作成しています。
<html>
<head>
<style>
#grad2 {
height: 100px;
background: -webkit-linear-gradient(red, orange, yellow, red, blue, green, pink);
background: -o-linear-gradient(red, orange, yellow, red, blue, green, pink);
background: -moz-linear-gradient(red, orange, yellow, red, blue, green, pink);
background: linear-gradient(red, orange, yellow, red, blue, green, pink);
}
</style>
</head>
<body>
<div id="grad2"></div>
</body>
</html>
コードのポイント
- ベンダープレフィックス：
-webkit-、-o-、-moz-といったプレフィックス付きの記述は、古いブラウザ向けの互換性対応です。現在のモダンブラウザでは、標準のlinear-gradient()のみで十分動作します。 - 高さの指定： グラデーションを見えるようにするため、
height: 100px;で要素の高さを確保しています。 - デフォルトの方向： 方向を指定しない場合、グラデーションは上から下へ適用されます。
to rightや角度（例：45deg）を先頭に追加すれば、方向を自由に変更できます。
方向を指定した応用例
左から右への斜めのグラデーションにしたい場合は、次のように書きます。
background: linear-gradient(45deg, red, orange, yellow, green, blue, purple);このように、CSS3のグラデーション機能を使えば、画像ファイルを用意することなく、軽量かつ柔軟な多彩な装飾表現が実現できます。
-
CSS3で放射状グラデーションを作成する方法
放射状グラデーション（Radial Gradient）とは、中心点から外側に向かって色が変化していくグラデーションのことです。CSSでは radial-gradient() 関数を使用し、色が切り替わる位置を示す「カラーストップ」を指定することで、自由な配色を実現できます。 形状はデフォルトで楕円（ellipse）に設定されていますが、circle を指定すれば正円のグラデーションに変更することも可能です。なお、放射状グラデーションを定義するには、最低でも2つのカラーストップを指定する必要があります。 radial-gradient の基本構文 background-image: radia
-
CSS3で透過グラデーションを作る方法｜linear-gradientとRGBAの使い方を解説
CSS3では、linear-gradient()関数を使うことで、上から下、左から右といった直線方向に複数の色を滑らかにつなげた「線形グラデーション」を簡単に作成できます。さらに、色の指定にRGBA()関数を使用すれば、各カラーストップ（色の変化点）に透明度を持たせることが可能です。 この記事では、CSS3を使って透明度のある線形グラデーションを実装する方法を、実際のコード例とともに解説します。 透過グラデーションの基本 linear-gradient()は、背景画像（background-imageプロパティ）として指定する関数です。第1引数にグラデーションの方向（例：to left＝右から