CSS Generator|シャドウ生成ツール

シャドウの設定を調整して、リアルタイムでプレビューとCSSコードを確認・コピーできる無料ツールです。

px
px
px
px

プレビュー
Preview


                

シャドウタイプの解説

ボックスシャドウ

box-shadowプロパティを使用して、要素全体にシャドウを適用します。内側シャドウ(inset)にも対応しています。

/* 使用例 */
box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.3);
テキストシャドウ

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));
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!