CSSボックスシャドウジェネレーター
ビジュアルコントロールでCSSボックスシャドウを設計します。オフセット、ブラー、スプレッド、カラーを調整できます。
Shadow Layers
Shadow 1
0px
4px
12px
-2px
20%
CSS
box-shadow: 0px 4px 12px -2px rgba(0, 0, 0, 0.20);
CSSボックスシャドウジェネレーターの使い方
- 1水平および垂直オフセットスライダーを調整します。
- 2ブラーラディウスとスプレッドを設定してシャドウの形状を制御します。
- 3シャドウのカラーと不透明度を選択します。
- 4インセットオプションをトグルしてインナーシャドウを作成します。
- 5生成されたCSS box-shadowコードをコピーします。
Zenovayアナリティクス
関連ツール
CSSグラデーションジェネレータ
ビジュアルエディタで美しいCSSグラデーションを作成します。直線、放射状、円錐状のグラデーションに対応しています。CSSボーダーラディウスジェネレーター
カスタムボーダーラディウス値をビジュアルコントロールで作成します。コーナーをリンクまたはアンリンクして素早く調整できます。CSS Flexboxプレイグラウンド
CSS Flexboxレイアウトを視覚的に学習・生成できます。方向、配置、折り返し、ギャップをリアルタイムで調整できます。CSSグリッドジェネレータ
ビジュアルエディタでCSSグリッドレイアウトを構築します。列、行、隙間を定義し、セルを複数のエリアにまたがらせることができます。よくある質問
ボックスシャドウの値はどのように機能しますか？▾
box-shadowはoffset-x、offset-y、ぼかし半径、広がり半径、色を設定します。オフセットは位置を制御し、ぼかしは柔らかさを制御し、広がりはサイズを制御します。負の広がりはシャドウを要素より小さくします。
複数のシャドウを追加できますか？▾
はい。「シャドウを追加」をクリックして追加のシャドウレイヤーを追加できます。複数のシャドウはモダンなデザインで深みと高度感を表現するために一般的に使用されます。
insetオプションは何をしますか？▾
insetキーワードはシャドウを外側のシャドウ（ドロップシャドウ）から内側のシャドウに変更します。これにより、押し込まれたまたは凹んだ外観が作成されます。
シャドウの不透明度を制御できますか？▾
はい。各シャドウレイヤーには不透明度スライダー（0〜100%）があります。ツールは指定された不透明度でrgba()カラー値を生成します。
スマートフォンでこのツールを使えますか？▾
はい、ボックスシャドウジェネレーターは最新のモバイルブラウザで動作します。スライダーでシャドウパラメータを調整して、どのデバイスでもCSSをコピーできます。
生成されたCSSはTailwind CSSで動作しますか？▾
はい。生成されたbox-shadow値をTailwindの任意値構文shadow-[value]で使用するか、tailwind.config.jsでカスタムシャドウとして定義できます。
シャドウレイヤーはいくつ追加できますか？▾
複雑な深み効果を作成するために複数のシャドウレイヤーを追加できます。各レイヤーにはオフセット、ぼかし、広がり、色、不透明度、insetの独立したコントロールがあり、リアルな立体感のあるデザインが可能です。