シャドウの設定を調整して、リアルタイムでプレビューとCSSコードを確認・コピーできる無料ツールです。
直感的な操作でbox-shadow, text-shadow, drop-shadowのコードを生成できます。
このツールは …回 使われています。
Preview
📖 使い方ガイド
Box Shadow
要素の枠全体に影をつけます。insetを選ぶと内側に影がつきます。
Text Shadow
文字だけに影をつけます。Spread（広がり）は無効になります。
Drop Shadow
背景透明な画像や複雑な形状に合わせて影をつけます。SpreadとInsetは無効です。
シャドウタイプの解説
- ボックスシャドウ
-
box-shadowプロパティを使用して、要素全体にシャドウを適用します。内側シャドウ（inset）にも対応しています。/* 使用例 */ box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.3);ボックスシャドウの詳しい説明はこちら
【CSS】画像の外側 / 内側に影（シャドウ）をつける方法 box-shadowプロパティを使って、画像の外側に影を付けて浮かび上がったように見せたり、逆に内側に影を付けて中心にフォーカスさせたように見せたりする方法を紹介しま… - テキストシャドウ
-
text-shadowプロパティを使用して、テキストのみにシャドウを適用します。文字の装飾や立体感の表現に最適です。
内側シャドウ（inset）や広がり具合には対応していません。/* 使用例 */ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); - ドロップシャドウ
-
filter: drop-shadow()プロパティを使用して、要素の実際の形状にシャドウを適用します。透明部分は無視されるので、PNG画像や複雑な形状に最適です。
内側シャドウ（inset）や広がり具合には対応していません。/* 使用例 */ filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.3));
