CSS3で導入されたlinear-gradient()とradial-gradient()関数は、画像ファイルに依存しない背景表現を可能にしました。従来はPhotoshopで作成したグラデーション画像をbackground-imageプロパティで読み込む必要がありましたが、CSSのみで実装できるようになり、HTTPリクエストの削減とファイル管理の簡素化が実現しています。
linear-gradient()では角度指定が重要です。to rightやto bottomといったキーワード指定も可能ですが、90degのような数値指定により、より精密な制御ができます。0degは下から上、90degは左から右、180degは上から下という対応関係を理解することで、デザインカンプの指定を正確に再現できます。
カラーストップの位置指定では、パーセント値またはピクセル値を使用します。linear-gradient(90deg, #ff0000 0%, #0000ff 50%, #00ff00 100%)のように、各色の開始位置を明示的に指定することで、グラデーションの遷移速度を制御できます。等間隔配置だけでなく、特定の箇所で急激な色変化を起こす表現も可能です。
rgba()形式での色指定により、透明度を含むグラデーションを作成できます。rgba(255, 255, 255, 0)からrgba(255, 255, 255, 1)へのグラデーションは、画像のフェードアウト効果として頻繁に使用されます。img要素の上にdiv要素を重ね、グラデーション背景を適用することで、写真に自然な暗転効果を加えられます。
3色以上を使用したグラデーションでは、各色の配置バランスが視覚的な美しさを左右します。均等配分が常に正解とは限らず、デザイン意図に応じて中間色の位置を調整する必要があります。例えば、夕焼けの表現では、オレンジ色の占有率を高め、紫色を狭い範囲に配置することで、より自然な空のグラデーションを再現できます。
repeating-linear-gradient()関数を使用すると、ストライプパターンや幾何学的な繰り返し模様を生成できます。repeating-linear-gradient(45deg, #000 0px, #000 10px, #fff 10px, #fff 20px)のような指定で、対角線上の縞模様を作成できます。ローディングアニメーションやプログレスバーの背景として活用される実装パターンです。
conic-gradient()関数は、円錐型グラデーションを生成します。カラーホイールやパイチャート、アナログ時計の文字盤など、円形の色分布を表現する際に有効です。conic-gradient(from 0deg, red, yellow, green, blue, red)のように、始点と終点を同色にすることで、継ぎ目のない円環を実現できます。
複数のグラデーションを重ねる技術も存在します。background-image: linear-gradient(to right, rgba(255,0,0,0.5), transparent), linear-gradient(to bottom, rgba(0,0,255,0.5), transparent)のように、カンマで区切って複数指定することで、格子状や複雑な色の混合を表現できます。ただし、レンダリング負荷が増加するため、モバイル環境での性能確認が必須です。
ボタンのbackgroundプロパティにグラデーションを適用することで、立体感とクリック可能性を視覚的に示唆できます。linear-gradient(to bottom, #4CAF50, #388E3C)のような微妙な明暗差により、フラットデザインとリッチデザインの中間的な表現が可能です。:hover疑似クラスでグラデーションの向きや色を変化させることで、インタラクティブ性を強調できます。
ヒーローセクションの背景では、写真の上にグラデーションオーバーレイを重ねる手法が一般的です。background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.7)), url('hero.jpg')のように、グラデーションを先に記述することで、画像の上に半透明の暗転効果を適用できます。これにより、白文字のテキストの可読性が向上します。
フォーム要素のborderをグラデーションで装飾する場合、border-imageプロパティを使用します。border-image: linear-gradient(to right, #ff0000, #0000ff) 1のような指定で、ボーダー全体にグラデーションを適用できます。ただし、border-radiusとの併用には制限があり、代替手法として擬似要素::beforeや::afterでグラデーション背景を配置する実装が一般的です。
プログレスバーでは、進行度に応じてグラデーションの表示範囲を動的に変更する実装が効果的です。div要素のwidthプロパティをJavaScriptで制御し、グラデーション背景を持たせることで、視覚的に魅力的な進捗表示を実現できます。色の遷移により、進行状況を直感的に伝達できます。
複雑なグラデーションは、ブラウザの描画エンジンに負荷を与えます。特にradial-gradient()やconic-gradient()は、linear-gradient()と比較して計算コストが高く、大量の要素に適用するとスクロール時のフレームレート低下を招きます。
アニメーションと組み合わせる場合、注意が必要です。@keyframesでグラデーションの色や位置を変化させると、GPUアクセラレーションが効かず、CPU処理となります。transformやopacityのアニメーションと比較して、パフォーマンスが大幅に劣化するため、装飾的な用途に限定すべきです。
古いブラウザでは、ベンダープレフィックスが必要な場合があります。IE10では-ms-linear-gradient()、古いWebKitでは-webkit-gradient()といった独自構文が存在しました。現在では標準構文のサポートが広がっていますが、レガシー環境への対応が必要なプロジェクトでは、Autoprefixerなどのツールによる自動付与が推奨されます。
印刷時には、グラデーションが正しく出力されない場合があります。@media printメディアクエリ内で、グラデーションを単色背景に置き換えることで、印刷物での視認性を確保できます。特に請求書や契約書など、正式な文書では、装飾的なグラデーションを削除し、シンプルなデザインに切り替えることが一般的です。
企業のブランドカラーを基調としたグラデーションパレットを定義することで、サイト全体の統一感を維持できます。プライマリーカラーとセカンダリーカラーを組み合わせたグラデーションをCSS変数として管理し、--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%)のように定義することで、複数ページでの再利用が容易になります。
Figmaからのデザインデータ受領時、グラデーションの角度や色の位置が詳細に指定されている場合があります。「135度、開始色#667eea、終了色#764ba2」といった情報を正確にCSSへ変換するには、ツールによる可視化と微調整が不可欠です。デザイナーとエンジニアの間で、グラデーションの見え方に関する認識齟齬が発生しやすい箇所です。
Material DesignやFluent Design Systemなどの既存デザイン言語では、グラデーションの使用ガイドラインが明確に定義されています。これらを参考に、独自のデザインシステムでもグラデーションの適用ルールを文書化することで、チーム内での実装品質を均一化できます。「ボタンには2色の垂直グラデーション、カードには3色の対角グラデーション」といった具体的な規則が有効です。
トレンドの変化にも注意が必要です。2010年代前半のスキューモーフィズムデザインでは派手なグラデーションが多用されましたが、フラットデザインの台頭により一時期は敬遠されました。現在は、微妙なグラデーションを活用した「フラット2.0」とも呼ばれるスタイルが主流です。流行に左右されすぎず、ブランドアイデンティティと調和したグラデーション設計が、長期的なサイト運用では重要となります。