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ジェネレーターの使い方

基本操作

  1. 左側の「構成」パネルで影のパラメータを調整します
  2. 右側でリアルタイムに影の効果を確認できます
  3. 好みの影効果ができたら、下部に表示されるCSSコードをコピーして使用できます

パラメータの説明

offsetX、offsetY(オフセット)

offsetXとoffsetYは影の位置(オフセット)を設定します。

  • offsetX: 水平方向の距離を制御します
    • 正の値: 要素の右側に影が表示されます
    • 負の値: 要素の左側に影が表示されます
  • offsetY: 垂直方向の距離を制御します
    • 正の値: 要素の下側に影が表示されます
    • 負の値: 要素の上側に影が表示されます

両方のオフセット値が0の場合、影は要素の真後ろに配置され、全方向に均等に広がります(blurspreadの値によって)。

blur(ぼかし)

blurパラメータは影のぼかし効果を調整します。

  • 大きい値: より広範囲に広がるソフトな影になります
  • 小さい値: よりシャープで鮮明な影になります
  • 0: ぼかしなしのシャープな影になります

spread(広がり)

spreadパラメータは影のサイズを元の要素に対して拡大または縮小します。

  • 正の値: 影が元の要素より大きくなります
  • 0: 影が元の要素と同じサイズになります
  • 負の値: 影が元の要素より小さくなります

inset(内側の影)

insetオプションをオンにすると、通常の外側の影ではなく、要素の内側に影を表示します。これは、凹んだボタンやくぼみのある要素を表現するのに便利です。

color(影の色)

影の色を指定します。RGBAカラー形式を使用することで、透明度も調整できます。

  • 濃い影: 高い不透明度で深みのある影に
  • 軽い影: 低い不透明度でさりげない影に

プレビューカラー

この設定は生成されるCSSには影響しませんが、プレビュー表示をカスタマイズできます。

  • ボックス色: 影が適用される要素の色
  • 背景色: プレビュー領域の背景色

デザインのヒント

効果的な影の使い方

  1. 微妙な影: 小さいoffsetとblur値、低い不透明度を使用して自然な影を作成
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    
  2. 浮いた効果: やや大きめのoffsetY値とblur値で要素が浮いているような効果を作成
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    
  3. 多重の影: 複数の影を組み合わせてより複雑で洗練された効果を作成
    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