CSSシャドウジェネレーター
CSS box-shadowとtext-shadowを視覚的に作成し、コードをコピーできる無料オンラインツールです。
Box Shadow
シャドウタイプ
シャドウレイヤー
レイヤー 1
10%
CSSコード
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);プリセットシャドウ
主な機能
- 2つのタイプ: Box Shadow、Text Shadow
- リアルタイムプレビュー: 変更を即座に確認
- 複数レイヤー: 最大5つのシャドウレイヤーを追加
- 細かい調整: X/Yオフセット、ぼかし、拡散、色、透明度
- Insetサポート: 内側のシャドウ効果
- プリセット: 6つのシャドウプリセット
- ワンクリックコピー: CSSコードを即座にコピー
シャドウタイプ
1. Box Shadow
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1);
要素の外側または内側にシャドウ効果を追加します。
使用例:
- カードシャドウ
- ボタンの立体感
- モーダル背景
- 画像ボーダー効果
2. Text Shadow
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
テキストにシャドウ効果を追加します。
使用例:
- ヘッダータイトル
- ロゴテキスト
- ネオン効果
- 立体テキスト
ブラウザ互換性
Box Shadow
- ✅ Chrome 10+
- ✅ Firefox 4+
- ✅ Safari 5.1+
- ✅ Edge 12+
- ✅ IE 9+
- ✅ すべてのモバイルブラウザ
Text Shadow
- ✅ Chrome 4+
- ✅ Firefox 3.5+
- ✅ Safari 4+
- ✅ Edge 12+
- ✅ IE 10+
- ✅ すべてのモバイルブラウザ
関連ツール
- CSSグラデーションジェネレーター - グラデーション生成
- 色変換ツール - HEX、RGB、HSL色変換
- CSS Border Radiusジェネレーター - ボーダー半径設定