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

このツールでできること

ボックスシャドウジェネレーターでは、影を目で見ながらデザインし、完成した box-shadow 宣言をコピーできます。必要なだけレイヤーを重ね、それぞれのオフセット、ぼかし、広がり、色、不透明度を設定し、内側の影に切り替えると、プレビューがすぐに更新されます。既存の box-shadow の値を貼り付けて視覚的に編集することもできます。処理はすべてブラウザ内で行われます。

使い方

1. プリセットから始めるか、サンプルの影をそのまま使います。
2. レイヤー ボタンで編集するレイヤーを選ぶか、+ レイヤーを追加 で上に重ねます。
3. 横方向のオフセット、縦方向のオフセット、ぼかし、広がり をドラッグし、色 を選び、不透明度 を下げてやわらかくします。内側の影 をオンにすると内側の影になります。
4. プレビューの ボックスの色、背景、角の丸み をページに合わせます。これらはプレビューだけに影響します。
5. CSS カードからコードをコピーします。

下部の box-shadow の CSS 欄は編集できます。スタイルシートやデザインツールの影を貼り付けると、コントロールに反映されます。rem と em は 16px として px に換算されます。

例

.card {
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 12px 24px -6px rgb(30 64 175 / 0.25);
}

自然な影にするコツ

• 不透明度は低めに。 5〜25% の黒がリアルに見えます。真っ黒な影は重たく見えます。
• 負の広がり を使うと大きなぼかしが左右にはみ出しません。多くの「カード」の影はこの技です。
• 影に色をのせる。 背景色やブランドカラーを少し混ぜた影は、純粋なグレーより豊かに見えます。
• 光は一方向から。 すべてのレイヤーで縦方向のオフセットを正にすると、光源の向きがそろいます。
• パフォーマンス。 多くの要素に大きなぼかしを付けると低価格のスマホでスクロールが重くなります。アニメーションでは影そのものではなく opacity や transform を動かしましょう。