プレビュー
シャドウレイヤー
CSSコード
box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.15);
プリセット
プロパティ
正の値はシャドウを右へ、負の値は左へ移動します。
正の値はシャドウを下へ、負の値は上へ移動します。
値が大きいほど、より柔らかく広がったシャドウになります。
正の値はシャドウを拡大し、負の値は縮小します。
要素の内側にシャドウを作成します。
CSS Box Shadowジェネレーターについて
視覚的なビルダーでCSS box-shadowをデザインできます。複数のシャドウレイヤーを追加し、オフセット、ぼかし、広がり、不透明度を細かく調整して、ワンクリックでCSSコードをコピーできます。
CSS Box Shadowの完全ガイド
無料オンラインCSS Box Shadowジェネレーター
外側シャドウと内側シャドウを、オフセット、ぼかし半径、広がり、色、不透明度まで正確に調整して作成できます。UIに奥行き、立体感、グロー効果を加えるのに便利なビジュアルビルダーです。
CSS Box Shadowとは？
CSSのbox-shadowプロパティは、要素の枠の周囲にシャドウ効果を追加します。シャドウは要素の外側にも内側にも配置でき、複数のシャドウを重ねることでより豊かな効果を作れます。 box-shadow
Box Shadowのプロパティ
オフセット（XとY）
- 水平オフセットはシャドウを左右に移動します
- 垂直オフセットはシャドウを上下に移動します
- 正の値は右または下へ移動します
- 負の値は左または上へ移動します
- 0にすると中央に配置されたシャドウになります
ぼかしと広がり
- ぼかし半径はシャドウの輪郭を柔らかくします
- ぼかしを大きくすると、より拡散したシャドウになります
- 広がりはシャドウを拡大または縮小します
- 正の広がりはシャドウを大きくします
- 負の広がりはシャドウを小さくします
色と不透明度
- 任意のCSSカラー値に対応しています
- RGBAで半透明のシャドウを作れます
- 暗い色は奥行きのあるシャドウに向いています
- 色付きシャドウはグロー効果に適しています
- 低い不透明度にすると控えめなシャドウになります
内側シャドウ
- 要素の内側にシャドウを作成します
- 押し込みや埋め込みの効果に便利です
- 外側シャドウと組み合わせられます
- 内側のグローや照明効果にも使えます
- 他のシャドウと重ねられます
CSS Box Shadow構文
/* Basic Shadow */
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
/* With Spread */
box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.15);
/* Inset Shadow */
box-shadow: inset 0px 2px 8px rgba(0, 0, 0, 0.2);
/* Multiple Shadows */
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1),
0px 2px 4px rgba(0, 0, 0, 0.06);
主な機能
ビジュアルビルダー
- インタラクティブなライブプレビュー
- すべてのプロパティに対応したレンジスライダー
- HEX入力付きカラーピッカー
- プレビューボックスと背景を調整可能
- border-radiusをカスタマイズ可能
CSS出力
- リアルタイムでCSSコードを生成
- シャドウ値または完全なプロパティをコピー
- 本番向けのきれいなコード
- 不透明度に応じたRGBAカラー出力
- モダンブラウザで動作
プリセットとレイヤー
- プロ品質のシャドウプリセット12種類
- 複数のシャドウレイヤーに対応
- レイヤーを簡単に複製・編集
- 内側シャドウの切り替え
- ワンクリックでプリセットを読み込み
デザインパターン
- Material Designのエレベーション
- ニューモーフィズムとソフトUI
- ネオングロー効果
- レイヤー化された奥行きシャドウ
- シャープなレトロ風シャドウ
このツールの使い方
- オフセットを調整: 水平・垂直スライダーでシャドウの位置を調整します。
- ぼかしを設定: 柔らかいシャドウにするにはぼかしを大きくし、シャープにするには0にします。
- 広がりを設定: 正の値でシャドウを広げ、負の値で縮小します。
- 色を選択: シャドウの色を選び、不透明度で透明感を調整します。
- 内側を切り替え: insetを有効にすると内側シャドウを作成できます。
- レイヤーを追加: 複数のシャドウを追加し、各レイヤーを個別に編集できます。
- プリセットを試す: 用意されたシャドウスタイルをすぐに読み込めます。
- CSSをコピー: シャドウ値または完全なCSSプロパティをクリップボードへコピーします。
シャドウデザインのヒント
低い不透明度を使う: リアルなシャドウは控えめです。真っ黒ではなく10から20%程度の不透明度から始めましょう。
複数のシャドウを重ねる: 柔らかいシャドウを2から3層重ねると、重い単一シャドウより自然な奥行きになります。
光の方向をそろえる: ページ全体でシャドウの方向を統一すると、まとまりのある見た目になります。
色付きシャドウを使う: 色付き要素では、その要素色より少し暗い色をシャドウにすると自然です。
シャドウを強くしすぎない: 重いシャドウを多用すると、デザインが散らかって見えることがあります。
ブラウザ互換性
Box Shadow: Chrome、Firefox、Safari、Edge、Operaを含むすべてのモダンブラウザで対応しています。
複数シャドウ: モダンブラウザで対応しています。複数のシャドウレイヤーはカンマで区切ります。
ベンダープレフィックス: 標準のbox-shadow構文ではベンダープレフィックスは不要です。
こんな人に最適
- Webデザイナー
- フロントエンド開発者
- UI/UXデザイナー
- WordPress開発者
- Tailwind CSSユーザー
- Bootstrap開発者
- ランディングページ制作者
- アプリ開発者
- コンポーネントライブラリ制作者
- デザインシステム制作者
- フルスタック開発者
- CSSを学ぶ学生
完全なプライバシー保護
すべてのシャドウ生成はJavaScriptを使ってブラウザ内で行われます。データがサーバーへ送信されることはないため、デザイン作業はプライベートに保たれます。