CSS Box Shadowジェネレーター

ライブプレビューで重ね影のCSSを作成

CSS Box Shadowジェネレーターはすべてブラウザ内で動作します。作成した影のレイヤーと生成されたCSSがデバイスの外に出ることはなく、ArrayKitに何もアップロードされません。

CSS Gridジェネレーターを開く

CSS Box Shadowジェネレーター について

CSS Box Shadowジェネレーターは、それぞれ独自のオフセット・ぼかし・広がり・色・inset切り替えを持つ影のレイヤーを何枚でも重ねることでbox-shadowのCSS宣言を組み立てます。値を調整するとライブプレビューボックスが即座に更新されるので、コードをコピーする前に影の見え方を正確に確認できます。柔らかい環境光の影の下にタイトなコンタクトシャドウを重ねてリアルな奥行きを演出したり、insetレイヤーとoutsetレイヤーを組み合わせて押し込まれたボタンのような見た目にしたりできます。カード・ボタン・モーダルをスタイリングし、スタイルシートでピクセルオフセットを手作業で調整することなく正確なbox-shadow値が欲しいフロントエンド開発者やデザイナー向けに作られています。すべてブラウザ内でローカルに動作し、CSSやデザインの詳細がどこにもアップロードされることはありません。

機能

CSS Box Shadowジェネレーター の使い方

  1. 最初の影レイヤーのx・y・ぼかし・広がりを調整する
  2. 色を選び、影を要素の内側に表示したい場合はInsetを切り替える
  3. 「レイヤーを追加」をクリックして奥行きを出すためにもう一枚影を重ねる
  4. コードパネルから生成されたbox-shadowのCSSをコピーする

例

入力

x0 y4 blur8 rgba(0,0,0,.2)

出力

box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);

柔らかいドロップシャドウを、そのまま貼り付けられるCSS宣言としてレンダリング。

よくあるエラーとトラブルシューティング

よくある質問

CSS Box Shadowジェネレーターは何を生成しますか?
設定した1つ以上のレイヤー（それぞれ独自のオフセット・ぼかし・広がり・色・inset設定を持つ）から構築される、スタイルシートにそのまま貼り付けられる完全なbox-shadowのCSS宣言を生成します。
CSS Box Shadowジェネレーターは複数の影を重ねて作成できますか?
はい。「レイヤーを追加」をクリックすれば必要なだけ影のレイヤーを重ねられます。CSSのbox-shadowはカンマ区切りの複数レイヤーに対応しており、ツールが正しい順序で結合します。
inset box-shadowとは何ですか?
inset box-shadowは要素の背後ではなく内側にレンダリングされる影で、押し込まれたボタン効果や控えめな内側の縁取りに便利です。任意のレイヤーでInsetを切り替えることで変更できます。
CSS Box Shadowジェネレーターはrgbaやhexカラーに対応していますか?
はい。レイヤーの色フィールドにhex・rgb()・rgba()など有効なCSSカラーを入力するか、hex値の場合はカラーピッカーを使用できます。rgbaを使えば影の不透明度を個別に制御できます。
CSS Box Shadowジェネレーターは私のデザイン値をアップロードしますか?
いいえ。すべての影のレイヤーと生成されたCSSはブラウザ内にとどまります。デザインに関するデータがArrayKitやいかなるサーバーにもアップロードされることはありません。
硬い縁ではなく柔らかくリアルな影にするにはどうすればよいですか?
オフセットに対してぼかしの値を大きくし、小さくタイトな影と大きく柔らかい影を重ねる方法を検討してください。この2層アプローチは実際の照明下での影の見え方を模倣します。

関連ツール

すべての ArrayKit ツール