ボックスシャドウ生成
CSSのbox-shadowプロパティを生成します
シャドウレイヤー
シャドウ 1
シャドウのプリセット
シャドウのヒント
オフセット値が正ならシャドウは右下に、負なら左上に移動します。
ぼかし半径はシャドウの柔らかさを決めます。値が大きいほど、シャドウがぼやけます。
拡張半径はシャドウの大きさを拡大または縮小します。
内側のシャドウは、奥行きを演出する内側の影を作ります。
複数のシャドウを重ねると、複雑な照明効果を作れます。
不透明度を低くすると、より控えめで自然なシャドウになります。
ライブプレビュー
プレビュー倍率: 100%
CSS宣言
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);CSSクラス
.shadow {
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
}Tailwind CSS (近似)
shadowこれはスタイルの提案です。独自のオフセット、色、内側のシャドウ、複数のレイヤーには、生成されたCSSが必要です。
レイヤーを調整するか、プリセットを試してください。操作に合わせてプレビューが更新されます。
ボックスシャドウ生成について
この無料のCSSボックスシャドウ生成ツールを使えば、視覚的に細かく調整しながらプロ品質の影効果を作成できます。スライダーでオフセット、ぼかし半径、拡散半径、色、不透明度を調整すると、結果がリアルタイムで更新されます。複数の影を重ねて複雑な奥行き効果を作り、UI要素を引き立てましょう。
影は、モダンなWebインターフェースで視覚的な階層と奥行きを表現するために欠かせません。よく作り込まれたbox-shadowは、カードをページの上に浮かせたり、ボタンを押せそうに見せたり、ナビゲーション要素を背景から際立たせたりします。このツールを使えば、box-shadowの値を手作業で試行錯誤する手間がなくなります。
このジェネレーターは、外側の影と内側の影(inset)の両方、複数の影レイヤー、一般的な影スタイル用の6種類のプリセットに対応しています。出力はワンクリックでコピーできるCSSコードで、おおよそのTailwind CSSユーティリティクラスの候補も表示されます。すべての処理はブラウザ内で行われ、データがサーバーに送信されることはありません。
主な機能
- 影レイヤーの追加、削除、個別設定が可能
- Xオフセット、Yオフセット、ぼかし半径、拡散半径を調整できる精密なスライダー
- 各影レイヤーに使える、HEX入力と不透明度調整付きのカラーピッカー
- 内側の奥行きやエンボス効果を作るinsetシャドウの切り替え
- 6種類のプリセット: 控えめ、中、大、特大、内側、複数
- 独創的な影の組み合わせを見つけられるランダム影生成
- 要素の色を変更できるリアルタイムのライブプレビュー
- 整ったCSS出力をワンクリックでクリップボードにコピー
- CSSクラスやおおよそのTailwind CSSユーティリティなど、別形式での出力
- どんな明るさの環境でも快適に編集できる完全なダークモード対応
ボックスシャドウ生成の使い方
- 影レイヤーを追加: 初期設定の影から始めるか、「追加」をクリックして複雑な効果用の影レイヤーを増やします。
- 影のプロパティを調整: スライダーで、各影レイヤーのX/Yオフセット、ぼかし半径、拡散半径、色、不透明度を設定します。
- insetを切り替え: 影レイヤーの「Inset」チェックボックスをオンにすると、外側ではなく内側の影になります。
- 結果をプレビュー: ライブプレビューの要素で、影の見え方をそのまま確認できます。必要に応じてプレビュー要素の色を変更してください。
- プリセットを試す: 6種類のプリセットのどれかをクリックすると、よく使われる影スタイルを出発点として手早く適用できます。
- CSSをコピー: 「コピー」ボタンをクリックすると、完成したbox-shadowのCSS宣言がクリップボードにコピーされます。
活用例
- カードの浮き上がり表現: カードコンポーネントに奥行きを加えて、ページ背景の上に浮いているように見せます。
- ボタンのホバー状態: ユーザーの操作に視覚的に反応するボタン用の、影のトランジションを作成します。
- モーダルとダイアログのスタイル: モーダルやダイアログに大きくやわらかい影を付けて、背景との区別をはっきりさせます。
- ナビゲーションのドロップダウン: ドロップダウンメニューやポップオーバーに、重なりと奥行きを伝える影を設定します。
- 入力欄のフォーカス効果: フォーム入力欄やインタラクティブな要素のフォーカス表示として、色付きの影を使います。
- insetの効果: トグルボタン、アクティブ状態、装飾要素に、押し込まれたような見た目やエンボス調の表現を加えます。
- ニューモーフィズムデザイン: 明るい影と暗い影を複数組み合わせて、人気のソフトUIの雰囲気を実現します。
- 画像のフレーム表現: 画像やメディアのコンテナに控えめな影を付けて、洗練されたギャラリーの見た目にします。
よくある質問
このツールは無料ですか？
はい、ボックスシャドウ生成は完全に無料で、作成できる影の数にも制限はありません。登録や支払いも不要です。
データは安全ですか?
影の生成とプレビューはすべてお使いのブラウザ内で完結します。データが外部サーバーに送信されることはないため、設定内容やCSS出力は完全に非公開のままです。
ぼかし半径と拡散半径の違いは何ですか?
ぼかし半径は影のやわらかさや拡がり具合を決め、値が大きいほど緩やかにフェードします。拡散半径は、要素に対する影の大きさを広げ(正の値)たり縮め(負の値)たりします。
1つの要素に複数の影を使えますか?
はい、CSSではカンマ区切りで複数のbox-shadowを指定できます。このツールでは複数の影レイヤーを追加でき、自動的に1つのbox-shadow宣言にまとめられます。
insetシャドウとは何ですか?
insetシャドウは要素の外側ではなく内側に描画され、へこんだ、または押し込まれたような見た目になります。入力欄、ボタンのアクティブ状態、ニューモーフィズムのデザインでよく使われます。
box-shadowはすべてのブラウザで使えますか?
はい、box-shadowプロパティは、Chrome、Firefox、Safari、Edge、Operaを含むすべての最新ブラウザで完全にサポートされています。ベンダープレフィックスは不要です。
ヒントとベストプラクティス
- 影は控えめに: 低い不透明度(5-15%)と適度なぼかしで、デザインを邪魔しない自然でプロらしい影になります。
- 負の拡散値を使う: わずかに負の拡散半径を指定すると、要素の真下に影がより小さく引き締まって見えます。
- 複数の影を重ねる: 小さく濃い影と、広く淡い影を組み合わせると、現実の光に近い自然な奥行きが生まれます。
- 光源をそろえる: デザイン全体でオフセットの向きを統一し、1つの一貫した光源を表現します。
- パフォーマンスにも配慮: 多くの要素に大きなぼかし値を使うと、特にモバイル端末で描画性能に影響することがあります。
- 影で階層を表現: 高さがあるほど(オフセットとぼかしが大きいほど)、視覚的な重なりの中でユーザーに近い要素であることを示します。