CSS Box Shadowジェネレーター
ライブプレビュー付きで多層CSSボックスシャドウをビジュアルに構築 — ワンクリックでCSSをコピー
Preview
Shadow Layers
(1/8)CSS Output
box-shadow: 0px 8px 24px -4px rgba(99, 102, 241, 0.5);
CSS Box Shadow Generator
Build multi-layer CSS box shadows visually with live preview. Adjust offset, blur, spread, color, and opacity for each layer, then copy the ready CSS.
FAQ
What is the CSS box-shadow syntax?
box-shadow: offset-x offset-y blur-radius spread-radius color. Example: box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1).
How do I add multiple shadows?
Separate multiple shadow values with commas: box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 10px 40px rgba(0,0,0,0.05).
What is an inset shadow?
Adding the 'inset' keyword makes the shadow appear inside the element rather than outside — useful for pressed button states.
さらに探す
おすすめのその他の 開発者ツール…
JSONフォーマッター
構文ハイライトとエラー検出でJSONを整形、検証、圧縮
Base64エンコーダー/デコーダー
テキストやファイルをBase64にエンコードし、Base64文字列を読めるテキストにデコード
URLエンコーダー/デコーダー
URLコンポーネントとクエリ文字列パラメータをエンコード・デコード
UUIDジェネレーター
ランダムUUID（v1、v4）を生成するか、複数のUUIDを一括生成
ハッシュジェネレーター
テキストやファイルからMD5、SHA-1、SHA-256、SHA-512ハッシュを生成
正規表現テスター
リアルタイムのマッチハイライトとグループ抽出で正規表現をテスト
JWTデコーダー
JSON Web Tokenをデコードして検査 — ヘッダー、ペイロード、署名を確認
HTMLフォーマッター
適切なインデントと構文ハイライトでHTMLコードを整形・美化