CSS ボックスシャドウジェネレータ

CSS ボックスシャドウジェネレータの機能

• 01

  すべてのパラメータがスライダー

  水平と垂直のオフセット、ぼかし半径、スプレッド半径、不透明度はそれぞれにスライダーと数値入力があり、ドラッグで微調整してからキーボードでピクセル精度に調整できます。

• 02

  インセットシャドウをサポート

  インセットシャドウトグルを切り替えて、ドロップシャドウとインナーシャドウを切り替えます——押下されたボタン、沈み込んだ入力、ニューモーフィック表面に有用です。

• 03

  色と不透明度を個別に制御

  任意の 16 進数値でカラーピッカーから基本色を選択し、不透明度を個別に調整します。出力は rgba() を使用するため、CSS をコピーするときに色とアルファが読み取り可能なままになります。

CSS ボックスシャドウジェネレータのよくある質問

スプレッド値は何をしますか？

正のスプレッドはぼかしが適用される前に全方向でシャドウを拡大します。負のスプレッドはそれを縮小します。小さなぼかしと組み合わせるとタイトで明確なグローに役立ちます。

複数のシャドウを追加できますか？

このジェネレータは単一のシャドウ宣言を出力します。シャドウを重ねるには、値をコピーして、CSS でコンマで区切って 2 回貼り付けます——ボックスシャドウはコンマ区切りリストを受け入れます。

インセットシャドウが見えない理由は？

インセットシャドウは要素の内側に描画されるため、表示するには背景色またはパディングが必要です。透明または 0 サイズの要素では表示されません。

プレビューはピクセル精密ですか？

はい——プレビューは実際の要素で実際の CSS ボックスシャドウプロパティを使用するため、表示内容はスタイルシートが正確にレンダリングする内容です。