CSS: CSSグラデーションとシャドウ
最終更新：2026-10-13
1. グラデーション
グラデーションは色の間のスムーズな遷移を作成します。CSSは2つの主要なグラデーション関数を提供します。
(1) linear-gradient
直線グラデーションを作成：
▶ サンプル
▶ 試してみよう(2) radial-gradient
円形/楕円形のグラデーションを作成：
▶ サンプル
▶ 試してみよう2. シャドウ
(1) box-shadow
要素にシャドウエフェクトを追加：
▶ サンプル
▶ 試してみよう(2) text-shadow
テキストにシャドウを追加：
▶ サンプル
▶ 試してみよう❓ よくある質問
Q グラデーション作成にツールはありますか？
A おすすめ：cssgradient.ioとwebgradients.com——ドラッグ＆ドロップのグラデーションジェネレーターです。コードを直接コピーできます。他のグラデーションスキームを研究すると、角度や色の停止点の直感が養われます。
Q box-shadowは複数のシャドウを持てますか？
A はい、カンマで区切ります：
box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 8px 32px rgba(0,0,0,0.08);で二重シャドウ効果が作成されます。シャドウは宣言順にスタックされ、先に記述したものが上に表示されます。Q text-shadowとbox-shadowの違いは何ですか？
A
text-shadowはテキストのみに作用し、スプレッドパラメータはなく、insetをサポートしません。box-shadowは要素のボックス全体に作用し、スプレッドがあり、insetをサポートします。構文は似ていますが、機能が異なります。📖 まとめ
- グラデーションとシャドウは、ビジュアル品質のための2つの強力なツールです
linear-gradientはボタン、背景、オーバーレイで最も一般的に使用box-shadowは奥行きを追加し、カードのホバーシャドウが最も一般的なユースケースtext-shadowはテキストを装飾し、drop-shadowは実際の要素の輪郭に従います- 両方を組み合わせると、より洗練されたレイヤードデザインが作成できます
📝 練習問題
- グラデーションボタンを作成してください——左から右への色の遷移で、ホバー時に方向が変化。
- 「フローティングカード」を作成してください——デフォルトでは微妙なシャドウ、ホバー時により深いシャドウ + 浮き上がり。
repeating-linear-gradientを使用してストライプ背景パターンを作成してください。- PNGアイコンやテキストに
text-shadowまたはdrop-shadowのグローエフェクトを追加してください。
