グラデーション・影・角丸は最もよく使う3つの CSS 効果であり、手で書いて調整するのが最も面倒な3つでもあります。構文自体は難しくありませんが、数値から結果を思い描けないため、調整→保存→リロード→また調整、を繰り返しがちです。それぞれが実際に何をするかを整理します。
グラデーション:linear-gradient と radial-gradient
グラデーションは色同士のなめらかな変化で、background として使います。
background: linear-gradient(90deg, #3388cc, #8833cc);
background: radial-gradient(circle, #3388cc, #8833cc);- 線形(linear)は角度に沿って変化します:
0degは下から上、90degは左から右、180degは上から下。 - **放射(radial)**は中心から円状に外へ広がります。角度は効きません。
- 色停止点を増やせば(
#a, #b, #c)多色グラデーションになります。
box-shadow:5つの数値と1つの色
box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.3);順に:水平オフセット・垂直オフセット・ぼかし・広がり・色。
- オフセットは影を動かします——正の x/y は右下へ押し出し、光が左上から来ているように見えます。
- ぼかしは縁を柔らかくし、大きいほど柔らかくなります。
- 広がりはぼかす前に影を拡大・縮小します。
- 先頭に
insetを付けると内側の影(へこんだ見た目)になります。
自然で違和感のない影は、たいてい「小さいオフセット+中程度のぼかし+低い不透明度の色」で、真っ黒ではありません。
border-radius:1つのプロパティ、4つの角
border-radius: 20px; /* 全角同じ */
border-radius: 20px 40px 20px 40px; /* 左上 右上 右下 左下 */1つの値は4角を同じに、4つの値は左上から時計回りに各角を設定します。border-radius を箱の高さの半分にするとカプセル形、正方形の一辺の半分にすると円になります。
視覚的に作る
数値を当てずっぽうにするのは遅いです。CSS ジェネレーターはスライダーとカラーピッカーを用意し、3つすべて(グラデーション・box-shadow・角丸)をリアルタイムでプレビューし、納得したらきれいな CSS をコピーできます。
関連ツール
- HEX・RGB・HSL の色コードを変換?カラー変換をどうぞ。
そのまま使えるレシピ
日常のほとんどの場面はこれで足ります。貼り付けて、数値を好みに合わせて調整してください。
/* カードを少し浮かせる */
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
/* やわらかい浮遊パネル */
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
/* 斜めのブランドグラデーション */
background: linear-gradient(135deg, #6366f1, #8b5cf6);
/* カプセル型ボタン */
border-radius: 9999px;影を2枚重ねる(近くて締まった影+遠くて柔らかい影)と、1枚の大きなぼかしより自然な奥行きに見えます。
よくある間違い
- 角度の単位を忘れる。
linear-gradient(90, …)は無効です。90degと書くか、to rightのようなキーワードを使います。 - 真っ黒な影。
rgba(0,0,0,1)は切り抜きシールのように見えます。実際の影は不透明度が低く、縁が柔らかいものです。 overflow: hiddenで影を切れると思い込む。box-shadowは箱の外に描かれ、その要素自身のoverflowの影響を受けません。- 角を「もっと丸く」しようとする。
border-radiusが短辺の半分を超えると、完全なカプセルや円で頭打ちになり、それ以上は丸くなりません。
よくある質問
グラデーションはアニメーションできますか?
色停止点そのものは不可です——CSS は background-image を補間できません。代わりに background-size を大きくして background-position を動かすか、2枚重ねてクロスフェードします。
影が見えないのはなぜ?
たいていオフセットもぼかしも 0、または色が完全に透明です。少しオフセットを与え、アルファを 0.2 前後にしましょう。
ベンダープレフィックスは必要?
不要です。linear-gradient・box-shadow・border-radius は現行のすべてのブラウザでプレフィックスなしに動きます。
配色が固まったら、各色を同じ表記で記録しておくと崩れません——HEX・RGB・HSL の解説を参照。あるいは画像カラーピッカーでデザイン案から起点の色を直接吸い取れます。