CSS Box Shadow & Border Radius ジェネレーター

CSS Box Shadow & Border Radius ジェネレーター

🎨 ライブプレビュー付きの無料CSS box-shadow／border-radiusジェネレーター。美しい影、 角丸、そしてモダンなUIエフェクトを作成できます。Webデザイン用にコピー＆ペーストできるコードを生成。

Box Shadow プロパティ

CSSのbox-shadowプロパティは、要素の枠の周りに影の効果を追加します。カンマで区切って複数の効果を設定できます。 影は、要素に対するX/Yオフセット、ぼかし半径、広がり半径、そして色で表現されます。

構文: box-shadow: [inset] [x-offset] [y-offset] [blur-radius] [spread-radius] [color];

影のパラメータ

• Xオフセット（水平）: 正の値で右、負の値で左に移動
• Yオフセット（垂直）: 正の値で下、負の値で上に移動
• ぼかし半径: 値が大きいほどぼかしが強い。0はシャープな影
• 広がり半径: 正の値で影が広がり、負の値で縮む
• 色: 任意のCSSカラー値（hex, rgb, rgba, hsl）
• Inset: 外側の影ではなく内側の影に変更

Border Radius プロパティ

border-radiusプロパティは、要素の外側の境界の角を丸めます。単一の半径で円形の角を作ることも、 2つの半径で楕円形の角を作ることもできます。

構文: border-radius: [top-left] [top-right] [bottom-right] [bottom-left];

よくある使用例

• カード: 控えめな影（0 4px 6px rgba(0,0,0,0.1)）＋中程度の角丸（8px）
• ボタン: ボタン色に合わせたカラーシャドウで奥行き感
• モーダル: 大きい影（0 20px 25px rgba(0,0,0,0.15)）で浮いて見せる
• 画像: 円形アバター（border-radius: 50%）や角丸サムネイル（8–16px）
• 入力欄: 押し込み／フォーカス状態にInsetシャドウ
• ニューモーフィック: 背景に合わせた明暗2つの影を組み合わせ

影のベストプラクティス

• 控えめな影を使う: 透明度10〜20%程度で十分なことが多い
• Yオフセット > Xオフセット: 上からの自然光を再現
• 高いほどぼかしも大きく: ぼかしが大きいほど「浮いて」見える
• 影色を合わせる: 要素の色を低い透明度で使うと統一感が出る
• パフォーマンス: box-shadowのアニメーションは避け、opacityやtransformを使う

人気の影スタイル

• Material Design: 0 2px 4px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.14)
• Tailwind SM: 0 1px 2px 0 rgba(0,0,0,0.05)
• Tailwind MD: 0 4px 6px -1px rgba(0,0,0,0.1)
• Tailwind LG: 0 10px 15px -3px rgba(0,0,0,0.1)
• Bootstrap: 0 0.5rem 1rem rgba(0,0,0,0.15)

Border Radius のパターン

• なし（0px）: シャープな角でミニマルな印象
• 小（4px）: 入力欄やボタンにほどよい丸み
• 中（8px）: カードやコンテナの標準的サイズ
• 大（16px+）: 柔らかく親しみやすい印象
• ピル（999px または 50%）: タグやバッジに最適
• 円（50%）: アバターやアイコンボタン（正方形が必要）

高度なテクニック

• 複数の影: 影を重ねてレイヤー表現
• グロー効果: オフセットなしで 0 0 20px [color]
• ニューモーフィズム: 左上に明るい影、右下に暗い影
• フォーカスリング: アクセシビリティ向けの色付き影（0 0 0 3px rgba(color,0.5)）
• 3D効果: オフセットとぼかしを増やした複数の影

ブラウザ対応

box-shadow と border-radius はすべてのモダンブラウザでサポートされています。IE8以前では vendor prefix（-webkit-box-shadow, -moz-box-shadow）が必要な場合がありますが、現在ではほとんど不要です。

💡 プロのコツ: hover効果でbox-shadowを直接アニメーションすると重いので避けましょう。 代わりに擬似要素（::before または ::after）に影を作り、そのopacityをアニメーションすると、 同じ見た目で大幅にパフォーマンスが向上します（特にモバイルで効果的）！