CSS Box Shadow ジェネレーター
好きなだけ影レイヤーを重ね、各レイヤーの offset・blur・spread・color・inset を調整するとプレビューが即時更新。6 つのプリセット（Soft, Medium, Large, Neumorphism, Inset, Glow）でよくあるデザインを素早く呼び出せ、結果は CSS ルールと Tailwind 任意値クラスの両方でコピー可能。
—
プリセット
シャドウレイヤー
プレビュー
CSS
box-shadow: 0px 8px 24px -4px rgba(0, 0, 0, 0.15), 0px 2px 6px -2px rgba(0, 0, 0, 0.08);
Tailwind
shadow-[0px_8px_24px_-4px_rgba(0,_0,_0,_0.15),_0px_2px_6px_-2px_rgba(0,_0,_0,_0.08)]
使い方
- プリセットを選ぶか、ゼロから始める。
- 各レイヤーの offset・blur・spread・色を調整。
- 内側影が必要なら Inset をオン。
- CSS ルールまたは Tailwind クラスをコピー。
よくある質問
- Blur と Spread の違いは？
- Blur は影の境界を柔らかく — 透明にフェードする距離。Spread はぼかし前の影の形そのものを拡大・縮小（負の値で内側へ）。
- 複数レイヤーを重ねるべき？
- 自然な影は通常 2 つ以上必要 — 近くて濃いレイヤー + 遠くて薄いレイヤー。Material Design や Tailwind のデフォルト影も全てマルチレイヤー。
- なぜ HEX ではなく rgba()？
- 透明度のある色は背景になじみ、より自然です。rgba() でアルファを直接指定できます。
- Tailwind クラスのアンダースコアは？
- Tailwind は空白をクラス区切りとして扱うため、任意値では空白の代わりにアンダースコアを使います。
関連ツール
CSS テキスト シャドウ ジェネレーター（マルチレイヤー）
text-shadow を何層でも重ねてネオン・3D・アウトライン・ロングシャドウ — ライブプレビューとコピー可能な CSS。
カラー 0 0
CSS グラデーションジェネレーター
線形・放射状 CSS グラデーションを多段カラーストップでデザインし、コードをコピー。
カラー 0 0
CSS フィルタープレイグラウンド
blur・brightness・contrast・hue・sepia・invert など 9 種を視覚的に組み合わせ — CSS や Tailwind 任意値でコピー。
カラー 0 0
カラートークンエクスポーター
カラーパレットを1回定義 → CSSカスタムプロパティ·Tailwind設定·SCSS·LESS·デザイントークンJSON·SwiftUI Color·Android `colors.xml` にエクスポート。ライブプレビュースウォッチ。
カラー 0 0
カラー名検索
任意のhex/RGB色に最も近いCSS・Tailwind・XKCD色名をOKLabの知覚距離で順位付け表示。
カラー 0 0
HSL カラーピッカー
色相・彩度・明度・アルファのスライダーで色を調整 — HEX・RGB・HSL・Tailwind 任意値をコピー。
カラー 0 0