コンテンツにスキップ
デザインとカラー

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

ライブ プレビューでオフセット、ブラー、スプレッド、カラー、レイヤーを調整します。

ブラウザで実行100%プライベートアップロードはありません
ツールを読み込み中…

このツールを共有する

必要な人に送ってください。

Xfin
完全なガイドを読む

CSS ボックス シャドウ ジェネレーター について

推測値ではなく現実的な標高を作成します。水平と垂直のオフセット、ぼかし、広がり、色、不透明度を調整し、複数のレイヤーを重ねて奥行きを出し、正確な CSS ルールをコピーします。

使い方

  1. 1オフセットとブラーを設定するスライダーをドラッグするか、正確なピクセル値を入力します。プレビュー カードはすぐに更新されます。
  2. 2色と不透明度を選択しますカラー ピッカーとアルファ スライダーを使用して、ダークモード シャドウを含むパレットに合わせます。
  3. 3CSSをコピーするより柔らかく、より自然な影が必要な場合は、さらにレイヤーを追加し、box-shadow 宣言をコピーします。

なぜこの css ボックス シャドウ ジェネレーター を使用するのでしょうか?

  • デバイスからは何も残らない. 作業はブラウザのタブで行われます。このアプリにはアップロード エンドポイントがないため、ファイルやテキストを保存したり、ログに記録したり、当社が閲覧したりすることはできません。
  • アップロードの待ち時間なし. サーバーへの往復を完全にスキップします。結果は、ネットワーク速度やキュー サイズではなく、ご使用の CPU によって制限されます。
  • 無料、アカウントなし、割り当てなし. サインアップの壁、ウォーターマーク、1 日あたりの制限はありません。オプションのアカウントは、デバイス間でお気に入りとプリセットを保存するためにのみ存在します。

よくある質問

私のデザインはここで安全に使用できますか?

はい。このツールは、JavaScript を使用してブラウザ内で完全に実行されます。貼り付けたり開いたりした内容はサーバーに送信されず、ページを閉じた後もページのコピーは保持されません。

アカウントを作成する必要がありますか?

いいえ。すべてのツールはサインインしなくても完全に使用できます。アカウントは、保存されたお気に入りと再利用可能なプリセットを追加するだけです。

電話でも機能しますか?

はい。インターフェースはモバイルファーストで、大きなタッチターゲットと積み重ねられたレイアウトを備えているため、デスクトップだけでなく携帯電話やタブレットでも動作します。

自然な影を作るにはどうすればよいですか?

小さなネガティブスプレッド、大きなブラー、低い不透明度を使用し、横よりも下にオフセットします。通常、2 つまたは 3 つの不透明度の低いレイヤーを重ねると、1 つの濃い影よりも見栄えが良くなります。

私の影が切り取られて見えるのはなぜですか?

親要素にオーバーフローが隠されているか、影が周囲のパディングよりも広い可能性があります。要素の周囲にマージンまたはパディングを追加して、ぼかしをレンダリングする余地を与えます。

ツールボックスの同じコーナーからさらに無料のユーティリティが入手できます。