CSSボックスシャドウ生成器
スライダーでボックスシャドウを視覚的にデザインし、CSSコードを即座に取得できます。
100% Client-Side
5px
5px
15px
0px
30%
box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.30);
概要 CSSボックスシャドウ生成器?
CSS box-shadowプロパティをビジュアルで編集し、コードを生成します。スライダーで影の位置、サイズ、色を調整しながらリアルタイムプレビューを確認できます。
使い方
- 水平/垂直オフセットを調整してください
- ブラーとスプレッドの値を設定してください
- 影の色と透明度を選択してください
- 生成されたCSSコードをコピーしてください
計算式
box-shadow: offset-x offset-y blur spread color;
よくある質問
- insetシャドウとは？
- 要素の内側に入る影です。押されたボタンや入力フィールドの効果を作る際に使います。
- 複数の影を同時に適用できますか？
- はい、カンマで区切って複数の影を重ねることができます。これにより複雑な立体効果を作れます。
- 影はパフォーマンスに影響しますか？
- ブラー値が大きいとレンダリングコストが増加します。モバイルでは適度なブラー値を使用することを推奨します。