シャドウの設定を調整して、リアルタイムでプレビューとCSSコードを確認・コピーできる無料ツールです。
プレビュー
Preview
シャドウタイプの解説
- ボックスシャドウ
-
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));