CSSボックスシャドウジェネレータ
複数のレイヤー、インセットサポート、不透明度制御、およびコピー可能なCSS出力を備えて、CSSボックスシャドウエフェクトを視覚的に設計します。
Live preview
Preview background
Box color
Presets
Shadow Layers
px
px
px
px
%
CSS Output
box-shadow: 0px 4px 16px -2px rgba(0, 0, 0, 0.15);
CSSボックスシャドウジェネレータの使い方
- 1スライダーでシャドウのオフセット、ぼかし、スプレッド、色を調整します。
- 2複雑なエフェクトのために複数のシャドウレイヤーを追加します。
- 3ニューモーフィック、フローティングカード、グローなどのプリセットを試してください。
- 4プロジェクト用に生成されたCSSコードをコピーします。
Zenovayアナリティクス
関連ツール
CSSグラデーションジェネレータ
ビジュアルエディタで美しいCSSグラデーションを作成します。直線、放射状、円錐状のグラデーションに対応しています。CSSボックスシャドウジェネレーター
ビジュアルコントロールでCSSボックスシャドウを設計します。オフセット、ブラー、スプレッド、カラーを調整できます。CSSボーダーラディウスジェネレーター
カスタムボーダーラディウス値をビジュアルコントロールで作成します。コーナーをリンクまたはアンリンクして素早く調整できます。CSS Flexboxプレイグラウンド
CSS Flexboxレイアウトを視覚的に学習・生成できます。方向、配置、折り返し、ギャップをリアルタイムで調整できます。よくある質問
CSSボックスシャドウの構文は何ですか？▾
box-shadow：[inset] offset-x offset-y [blur-radius] [spread-radius] color。例：box-shadow: 2px 4px 8px 0px rgba(0,0,0,0.2)。
ボックスシャドウとドロップシャドウの違いは何ですか？▾
box-shadowはボックスモデルの後ろに矩形のシャドウを作成します。filter: drop-shadow()は透明な領域を含む要素の表示される形状に従います。
現実的なシャドウを作成するにはどうすればよいですか？▾
低い不透明度（10～30％）、わずかな下向きオフセット、中程度のぼかし、ゼロまたは負のスプレッドを使用します。リアルな効果のために2番目の周囲シャドウレイヤーを追加します。
インセットシャドウは何に使用されますか？▾
インセットシャドウは要素の内側に表示され、押された/くぼんだエフェクトを作成します。押されたボタン、入力フィールド、ニューモーフィックデザイン、およびプログレスバーに使用されます。
複数のボックスシャドウはどのように機能しますか？▾
複数の値はカンマで区切られ、順序に従ってレンダリングされます（最初が上）。これにより、層状の深さ、グロー+ドロップシャドウの組み合わせ、およびニューモーフィックエフェクトが可能になります。