Box Shadowジェネレーター
直感的な操作でCSSの影効果を簡単にデザインできます。
構成
px
px
px
px
プレビューカラー
出力
box-shadow: 0px 0px 20px 16px rgba(17,17,26,0.08);
Box Shadowジェネレーターとは?
Box Shadowジェネレーターは、CSSのbox-shadow
プロパティを視覚的に作成できる便利なツールです。スライダーを動かすだけで直感的に影の効果を調整でき、リアルタイムにプレビューを確認しながら、ウェブデザインに最適な影効果を簡単に生成できます。コピー可能なCSS形式で出力されるため、作成した影効果をすぐにプロジェクトに組み込むことができます。
Box Shadowの基本
box-shadow
はCSSプロパティの一つで、HTML要素に影効果を追加することができます。このプロパティを使うことで、WebサイトやアプリケーションのUI要素に奥行きや立体感を与え、視覚的な階層構造を作ることができます。
基本的な構文は以下の通りです:
box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;
Box Shadowジェネレーターの機能と特徴
- 直感的な操作: スライダーを使って各パラメータを視覚的に調整可能
- リアルタイムプレビュー: 設定変更の効果をその場で確認できる
- コード出力: 作成した影効果のCSSコードを自動生成
- カラーカスタマイズ: 影の色やプレビューの色を自由に変更可能
- insetオプション: 内側の影効果も作成可能
Box Shadowジェネレーターの使い方
基本操作
- 左側の「構成」パネルで影のパラメータを調整します
- 右側でリアルタイムに影の効果を確認できます
- 好みの影効果ができたら、下部に表示されるCSSコードをコピーして使用できます
パラメータの説明
offsetX、offsetY(オフセット)
offsetXとoffsetYは影の位置(オフセット)を設定します。
- offsetX: 水平方向の距離を制御します
- 正の値: 要素の右側に影が表示されます
- 負の値: 要素の左側に影が表示されます
- offsetY: 垂直方向の距離を制御します
- 正の値: 要素の下側に影が表示されます
- 負の値: 要素の上側に影が表示されます
両方のオフセット値が0の場合、影は要素の真後ろに配置され、全方向に均等に広がります(blur
やspread
の値によって)。
blur(ぼかし)
blurパラメータは影のぼかし効果を調整します。
- 大きい値: より広範囲に広がるソフトな影になります
- 小さい値: よりシャープで鮮明な影になります
- 0: ぼかしなしのシャープな影になります
spread(広がり)
spreadパラメータは影のサイズを元の要素に対して拡大または縮小します。
- 正の値: 影が元の要素より大きくなります
- 0: 影が元の要素と同じサイズになります
- 負の値: 影が元の要素より小さくなります
inset(内側の影)
insetオプションをオンにすると、通常の外側の影ではなく、要素の内側に影を表示します。これは、凹んだボタンやくぼみのある要素を表現するのに便利です。
color(影の色)
影の色を指定します。RGBAカラー形式を使用することで、透明度も調整できます。
- 濃い影: 高い不透明度で深みのある影に
- 軽い影: 低い不透明度でさりげない影に
プレビューカラー
この設定は生成されるCSSには影響しませんが、プレビュー表示をカスタマイズできます。
- ボックス色: 影が適用される要素の色
- 背景色: プレビュー領域の背景色
デザインのヒント
効果的な影の使い方
- 微妙な影: 小さいoffsetとblur値、低い不透明度を使用して自然な影を作成
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
- 浮いた効果: やや大きめのoffsetY値とblur値で要素が浮いているような効果を作成
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
- 多重の影: 複数の影を組み合わせてより複雑で洗練された効果を作成
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
参考リソース
box-shadowについてより詳しい情報が必要な場合は、MDNのドキュメントを参照してください。
box-shadow - CSS: カスケーディングスタイルシート | MDN