Box Shadow Generator

CSSのbox-shadowをビジュアルにデザイン、ライブプレビューとコード出力。
Horizontal Offset4px
Vertical Offset4px
Blur Radius16px
Spread Radius0px
Opacity20%
Presets
Border Radius12px
CSS
box-shadow: 4px 4px 16px 0px rgba(0, 0, 0, 0.20);
TAILWIND
shadow-[4px_4px_16px_0px_rgba(0,0,0,0.20)]

Multi-Layer

Stack up to 5 shadow layers for complex effects.

Live Preview

See changes instantly on a customizable canvas.

CSS & Tailwind

Copy ready-to-use CSS or Tailwind output.

Client-side

All processing in your browser. No data uploaded.

Box Shadow Generatorについて

CSS Box Shadow Generator gives you a visual, real-time editor for crafting the perfect box-shadow CSS property without writing a single line of code by hand. Box shadows are one of the most powerful CSS effects — they add depth, elevate interactive elements, create glowing accents, and can even simulate borders or inset indentations. This tool supports up to five simultaneous shadow layers, letting you compose sophisticated multi-shadow effects like the popular "layered" technique (multiple soft shadows at increasing distances) that produces a more realistic depth effect than a single shadow can achieve. For each layer you can independently control the horizontal offset, vertical offset, blur radius, spread radius, color, opacity, and whether the shadow is inset or outset. Built-in presets cover the most common use cases from a subtle lift to a vibrant colored glow. Copy the output as a plain CSS rule or a Tailwind CSS arbitrary value class.

Box Shadow Generatorの使い方

  1. Use the sliders to adjust the Horizontal Offset, Vertical Offset, Blur Radius, Spread Radius, and Opacity for the active shadow layer.
  2. Click the Color picker to choose the shadow color, and toggle the "Inset" checkbox to switch between outset and inset shadows.
  3. Click "+" to add a second shadow layer (up to 5) for multi-layer effects.
  4. Try one of the built-in presets (Subtle, Medium, Heavy, Colored, Inset, Sharp, Layered, Glow) as a starting point.
  5. Use the preview panel on the right to evaluate the shadow. Customize the background color, box color, and border radius.
  6. Click "Copy CSS" to copy the box-shadow CSS rule, or "Copy Tailwind" to copy the equivalent Tailwind arbitrary-value class.

よくある質問

What does the Spread Radius control?

Spread radius expands or contracts the shadow before blurring. A positive value makes the shadow larger than the element; a negative value shrinks it, useful for creating a "lifted card" effect.

What is an inset shadow?

Adding the inset keyword moves the shadow inside the element's border rather than outside. This creates a pressed-in or embossed appearance, commonly used for form inputs.

How do I create a glowing effect?

Use the Glow preset, or manually set Horizontal and Vertical Offsets to 0, increase the Blur Radius (e.g. 24px), add a positive Spread (e.g. 4px), pick a vivid color, and raise the Opacity.

What is the Tailwind output format?

The Tailwind output is an arbitrary-value shadow class using Tailwind's square-bracket syntax, e.g. shadow-[0_4px_12px_0_rgba(0,0,0,0.18)]. It requires Tailwind CSS v3+.

Can I use more than 5 shadow layers?

The tool supports up to 5 layers. For even more complex effects, manually combine additional box-shadow values in your CSS after copying the base output from this tool.

Box Shadow Generatorの完全ガイド：無料オンラインツール

ブラウザ完結で安全・高速なBox Shadow Generator。開発者やクリエイターの作業を効率化

CSSのbox-shadowをビジュアルにデザイン、ライブプレビューとコード出力。を瞬時に実現する無料ツールです。面倒なソフトのインストールは不要で、安全にブラウザ上で処理できます。

Box Shadow Generatorが選ばれる理由

  • 高速処理: ミリ秒単位で即時実行。
  • プライバシー保護: データは端末外に送信されません。
  • 完全無料: 登録不要で制限なく利用可能。

簡単な3つの利用手順

  1. Box Shadow Generatorのページを開きます。
  2. データを入力または貼り付けます。
  3. 結果を確認してコピーまたは保存します。

機能比較

項目 Metoolzy Box Shadow Generator 他社オンラインツール 専用ソフト
料金 完全無料 制限あり 有料ライセンス
セキュリティ 完全ローカル処理 サーバー送信あり ローカル処理

主な活用シーン

  • エンジニアの開発・デバッグ効率化
  • Web制作者の日常作業
  • データ変換・最適化

よくある質問 (FAQ)

入力したデータは保存されますか？

いいえ、すべてブラウザ内で処理され保存されません。