重要なポイント
- 01すべてのbox-shadow パラメーターは、ピクセル精度チューニング用の独自のスライダーとプラス数値入力があります。
- 02Inset トグルは、押されたまたはニューモーフィック効果用にドロップシャドウとインナーシャドウの間で切り替わります。
- 03色と不透明度は別々に制御され、読める CSS 用の rgba() を出力します。
- 04プレビューは実 DOM 要素の実 CSS プロパティを使用します - 確認するのはあなたのスタイルシートが正確にレンダリングしているのです。
なぜ視覚的なボックスシャドウジェネレーターを使用するのか
CSS box-shadow は最大6つの値を取ります - 水平オフセット、垂直オフセット、ぼかし半径、スプレッド半径、色、およびオプションの inset キーワード。記憶から入力することは単純なシャドウで機能しますが、より微妙なもの - タイトなグロー、深いドロップシャドウ、柔らかな隆起層 - あなたは何かが正しく見えるまで推測して再読み込みしています。
視覚的ジェネレーターはその反復ループを折りたたみます。スライダーを動かし、変更を即座に確認、満足するときのみコピーします。Handytool の box-shadow ジェネレーターはあなたのブラウザで完全に実行されるため、プレビューは実 CSS プロパティを実 DOM 要素に適用します - ツールとあなたの実際なページ間にレンダリング違いはありません。
ボックスシャドウを設計する方法
- 01
水平・垂直オフセットを調整
正の値はシャドウを右下に移動します。負の値は左上に移動します。中央シャドウ(0, 0)はグロー効果を作成します。
- 02
ぼかし半径を設定
より高いぼかし値は、より柔らかく拡散したシャドウを作成します。ゼロぼかしは硬い固いシャドウアウトラインを生成します。
- 03
スプレッド半径を調整
正のスプレッドはぼかし前にシャドウを拡大します。負のスプレッドは縮小します。タイトな下要素シャドウに便利です。
- 04
色と不透明度を選択
カラーピッカーを使用してシャドウ色合いを選択し、微妙さのためにダウンダイアル不透明度を選択します。出力は値の読める rgba() を保つために使用します。
- 05
必要に応じて inset をトグル
Inset はドロップシャドウからインナーシャドウに切り替わります - 押されたボタン、沈んだ入力、ニューモーフィックサーフェス用に便利です。
- 06
CSS 宣言をコピー
コピーをクリックして完全な box-shadow 値を取得し、スタイルシートに貼り付けます。
アップロード、アカウント不要
ジェネレーターは完全にクライアント側です。あなたの色の選択、数値、プレビュー状態はあなたのブラウザに留まります - サーバーに何も送信されません。アカウントを作成する必要がなく、使用制限もありません。
プレビュー要素は実 CSS box-shadow プロパティを使用するため、出力は定義上正確です - キャンバスレンダリングやスクリーンショット近似は関わりません。コピーするピクセル値は、ブラウザが適用するピクセル値です。
ボックスシャドウジェネレーター FAQ
スプレッド値は何をしますか?
正のスプレッドはぼかし前にすべての方向のシャドウを拡大します; 負のスプレッドはそれを縮小します。低いぼかスプレッドと組み合わせるときに、タイトで定義されたグローに便利です。
複数の box-shadow を追加できますか?
このジェネレーターは一度に1つのシャドウを出力します。それらを重ねるには、値をコピーし、CSS でコンマで区切られたものとで複数のシャドウを分離します - box-shadow はカンマで区切られたリストを受け入れます。
なぜ inset シャドウは見えませんか?
Inset シャドウは要素の内部を描画するため、表示される背景色または見える埋め込みが必要です。透明または0サイズ要素には表示されません。
プレビューはピクセル正確ですか?
はい - プレビューは実 CSS box-shadow プロパティを実 DOM 要素で使用するため、あなたのスタイルシートが生成するのは正確に同じです。
ニューモーフィックシャドウとは?
ニューモーフィズムは2つのシャドウを使用します - 1つの明るいと1つの暗い - 反対方向にオフセットを行い、要素をフラットサーフェスから隆起または押された形にします。両方のシャドウは通常、押されたバリアント用に inset されます。