テキスト・開発者向けBROWSER · 0 UPLOADS · 無料
🔒ブラウザ内処理・アップロード不要
CSSボックスシャドウジェネレーター
CSSのbox-shadowを視覚的に作成。複数レイヤー対応、Material Design・Neumorphismプリセット付き。リアルタイムプレビューでコードを即コピー。
box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.2);10px 4px 6px 0px
Xオフセット（水平）0px
Yオフセット（垂直）4px
ぼかし半径6px
拡散半径0px
透明度20%
NEXT STEPS
完成しました
あなたにおすすめのツール
同じシーンのおすすめツール
形式変換
JPG/PNG/WebPを相互変換。画質と背景色を調整して保存。
同じシーンのおすすめツール
パレット抽出
写真から主要色を自動抽出し、HEXでコピーできる。
同じシーンのおすすめツール
2値化
写真を白と黒の2値に変換してシルエットや印刷向けに整える。
使用履歴に基づいておすすめを表示しています
このツールは誰向け？
Webデザイナー、フロントエンドエンジニア、UIデザイナー
使用場面
- 1ボタンやカードに立体感を出したい時
- 2Material Design風の影を作りたい時
- 3Neumorphismデザインを実装したい時
- 4CSSコードをコピペで使いたい時
よくある質問
CSS box-shadowとは何ですか？
CSSのbox-shadowプロパティは、要素に影を追加するためのスタイルです。X/Yオフセット、ぼかし半径、拡散半径、色を指定して、奥行き感や立体感を演出できます。
複数のシャドウを重ねられますか？
はい、カンマ区切りで複数のシャドウを重ねることができます。手前に表示したいシャドウを先に書き、後ろに行くほど奥に配置されます。
Neumorphism（ニューモフィズム）とは？
Neumorphismは、凸出したり凹んだりした立体的なUIデザインのトレンドです。明るいシャドウと暗いシャドウを組み合わせて、ソフトな立体感を表現します。
データはサーバーに送信されますか？
いいえ。すべての処理はブラウザ内で完結します。生成したCSSや設定がサーバーに送信されることはありません。
生成したCSSコードはどのブラウザに対応していますか？
box-shadowプロパティはChrome、Firefox、Safari、Edgeなど主要ブラウザすべてで対応しています。ベンダープレフィックスも不要です。