テキスト・開発者向け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
次にできること
次のステップもお試しください
CSSグラデーション
CSSのlinear-gradient、radial-gradient、conic-gradientを視覚的に作成。リアルタイムプレビューでコードを即コピー。
文字数カウント
文字数・単語数・行数・バイト数をリアルタイム表示。Twitter/ブログの文字数制限チェックに。
Markdown変換
MarkdownをHTMLに変換してプレビュー。GFM対応でコピペできるHTMLを生成。
ツールを組み合わせてより効率的に作業できます
このツールは誰向け？
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など主要ブラウザすべてで対応しています。ベンダープレフィックスも不要です。