ホーム
Tom Utilities

CSS ボックスシャドウ生成

開発者ユーティリティ

オフセット、ぼかし、広がり、色のスライダーでボックスシャドウを作成し、CSS をコピーします。

使い方

Build a shadow

Move the sliders to adjust the horizontal offset, vertical offset, blur and spread. Choose a color and enable inset for an inner shadow.

  1. Adjust the four sliders.
  2. Pick a shadow color.
  3. Copy the generated box-shadow declaration.

Negative values

Offsets and spread accept negative values, which move the shadow up or left and shrink it.

よくある質問

What is spread?

Spread expands or contracts the shadow before it is blurred. Positive values make the shadow larger.

Why is my shadow translucent?

The generated color includes partial transparency so the shadow blends with the background. Replace the color value if you want it fully opaque.

関連ツール

角丸生成 各角の CSS border-radius をピクセルまたはパーセントでプレビューし、コピーします。 CSS グラデーション生成 線形または放射状の CSS グラデーションをライブプレビュー付きで作成し、CSS をコピーできます。 CSS フォーマッター 1行に1プロパティ、一貫したインデントで CSS を整形します。 UUID / GUID ジェネレーター ランダムなバージョン4 UUID を生成し、1つずつまたはまとめてコピーします。 ハッシュジェネレーター 任意のテキストの MD5、SHA-1、SHA-256、SHA-512 ダイジェストを計算します。 タイムスタンプ変換 Unix タイムスタンプ、ISO 8601、人間が読める現地日時の間で変換します。