CSSボックスシャドウジェネレーター
スライダーでCSS box-shadowプロパティを視覚的に生成します。リアルタイムプレビューを確認してCSSコードをコピーできます。
CSS
機能
Slider controls
Color picker
Inset toggle
Multiple layers
Live preview & CSS code
使い方
1. オフセットX、オフセットY、ぼかし、広がりのスライダーをドラッグします。
2. カラーピッカーで色を選択します。
3. 「Inset」を切り替えて内側の影にします。
4. 生成されたCSSコードをコピーします。
よくある質問
What is box-shadow?
The CSS box-shadow property adds shadow effects around an element's frame.
関連ツール
CSSグラデーション生成
CSSの線形、放射状、円錐グラデーションを視覚的に作成します。複数のカラーストップを追加してCSSをコピーできます。...
CSSボーダーラジアス生成
CSS border-radiusを視覚的に作成 — 4つの角を個別にまたは一括で制御できます。リアルタイムプレビュー付き。...
CSS Flexboxプレイグラウンド
CSS Flexboxを学習・実験できます。コンテナのプロパティを調整して、レイアウトの変化をリアルタイムで確認できます。...
CSSグリッド生成
CSSグリッドレイアウトを視覚的に作成します。行、列、間隔を設定して、生成されたCSSとHTMLをコピーできます。...