CSSの美しいシャドウもこれなら簡単！ box-shadowを重ねた面倒なコードを簡単に生成できるツール -boxshadows.xyz

直感的なインターフェイスで、CSSのbox-shadowを使用した複雑で美しいシャドウを簡単に作成できるツールを紹介します。

シャドウはさまざまなパラメータで正確に調整でき、リアルタイムにシャドウの見た目とCSSのコードが生成されます。CSSの初心者でも経験豊富な人にとっても便利だと思います。

boxshadows.xyz

• boxshadows.xyzとは
• boxshadows.xyzの使い方

boxshadows.xyzとは

boxshadows.xyzは直感的なインターフェイスで、レイヤー化された複雑なシャドウを正確に、そして簡単に作成できるオンラインツールです。シャドウのタイプ、シャドウのぼかしと広がり、オフセットの調整など、さまざまなパラメータを調整しながらリアルタイムにシャドウを確認しながら作成できます。

boxshadows.xyz

boxshadows.xyzの使い方

boxshadows.xyzの使い方は簡単、登録など面倒なことは一切不要です。
まずは、左パネルの「Box Shadows」タブをクリックします。

boxshadows.xyzは、複数のボックスシャドウを扱えます。これによりレイヤー化されたシャドウのエフェクトを作成することができ、必要な数のシャドウを簡単に追加して多次元的なシャドウを作成できます。

追加したシャドウは削除（右のチェック）したり、一時的に非表示（左の目）にすることもできます。さまざまなシャドウのエフェクトを試したり、特定のシャドウがある場合とない場合でデザインの見た目を比較したいときに便利です。

boxshadows.xyzでは、insetのシャドウでもoutsetのシャドウでも完全にコントロールできます。ボックスシャドウのタイプを切り替えるには、上部のトグルを使用します。トグルを切り替えると、デザインへの効果をリアルタイムに視覚化されます。

offset値は数値入力または2Dスライダーで、正確にカスタマイズできます。

シャドウのぼかし（Blur）と広がり（Spread）も数値入力あるいは範囲スライダーで、正確にカスタマイズできます。この値を調整すると、ボックスからシャドウが伸びる距離と範囲を正確に設定できます。

上部の「Foreground」タブを選択すると、前景もカスタマイズできます。キャンバスのカラー、背景のカラー、ボーダー、角丸などを簡単に設定できます。

すべてのカスタマイズは、リアルタイムでプレビューでき、CSSのコードや解説も即座に生成されます。シャドウの見栄えをリアルタイムに確認できるので、希望するエフェクトをより簡単に素早く作成することができます。

生成されたコードは、下記の通りです。