Daily Toolkits

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

オフセット、ブラー、スプレッド、カラーを使用してレイヤード ボックス シャドウをデザインします。 カード上でプレビューし、ワンクリックで CSS をコピーします。

Box Shadow Generator

Live
Preview card

CSS output

box-shadow: 8px 16px 32px -4px rgba(192, 38, 211, 0.35);
border-radius: 24px;

Key capabilities

  • オフセット、ブラー、スプレッド、カラーを使用してレイヤード ボックス シャドウをデザインします。ライブ プレビューも含まれています。
  • ブラウザで実行
  • 無料で使用できます

使い方

  1. オフセット、ブラー、スプレッドを調整します。
  2. 色と不透明度を選択します (またはレイヤーを追加します)。
  3. box-shadow CSS をコピーします。

How this tool works

  1. オフセット、ブラー、スプレッドを調整します。
  2. 色と不透明度を選択します (またはレイヤーを追加します)。
  3. box-shadow CSS をコピーします。

Recommended settings

  • 最初はデフォルトのオプションを使用し、必要に応じて調整します

Supported formats

Text / on-page input

File size and limits

  • 非常に複雑なマルチレイヤーのプレビューは、古い携帯電話では遅く感じる場合があります。

Privacy

カラーおよび CSS ジェネレーターは完全にブラウザー内で実行されます。 プレビューと変換ではスタイルがアップロードされることはありません。

Common use cases

  • 必要なときにいつでもボックス シャドウ ジェネレーターを使用します。オフセット、ブラー、スプレッド、カラーを使用してレイヤード ボックス シャドウをデザインします。ライブ プレビューも含まれます。

Troubleshooting

貼り付け後のプレビューの見た目が変わる

ページ上に競合する CSS がないか確認します (リセット、継承された色)。 まず、生成されたルールを分離されたスタイルシートにコピーします。

よくある質問

これで CSS がアップロードされますか?

いいえ。ジェネレーターとコンバーターは、ライブ プレビューを使用してブラウザーで実行されます。

アカウントは必要ですか?

いいえ。ツールを開いてコントロールを調整し、CSS をコピーします。

関連ツール

Text Shadow Generator

Craft readable text-shadow styles with live typography preview.

Open tool

Border Radius Generator

Control each corner independently and preview rounded shapes with copy-ready CSS.

Open tool

CSS Gradient Generator

Build linear, radial, and conic gradients with live preview and copy-ready CSS.

Open tool