CSS Box-shadow ジェネレーター
リアルタイムプレビューで視覚的に box-shadow エフェクトをデザイン。複数のシャドウレイヤーを追加し、すべてのパラメーターを調整して、CSS をコピー。
미리보기
그림자 레이어
CSS 코드
복사됨!
CSS Box-shadow ジェネレーターとは？
CSS box-shadow ジェネレーターは、コードを手動で記述することなく、HTML 要素にシャドウエフェクトを作成するのに役立ちます。水平/垂直オフセット、ぼかし半径、広がり、色、不透明度などのパラメーターを視覚的なコントロールを使用して調整すると、ツールが正確な CSS プロパティ値を生成します。
Box-shadow の作成方法
- オフセットの調整 — X および Y スライダーを使用してシャドウを配置します
- ぼかしと広がりを設定 — シャドウの柔らかさとサイズを制御します
- 色の選択 — シャドウの色を選択し、その不透明度を調整します
- Inset の切り替え — 外側のシャドウと内側のシャドウを切り替えます
- レイヤーの追加 — 複数のシャドウを重ねて、複雑なエフェクトを作成します
- CSS のコピー — コピーボタンをクリックして、最終的なコードを取得します
この Box-shadow ジェネレーターを使用する理由
- 視覚的な編集 — プレビューボックスでシャドウの変更をリアルタイムで確認できます
- マルチレイヤー — 最大 5 つのシャドウレイヤーを組み合わせて、奥行きのあるエフェクトを実現します
- 正確なコントロール — オフセット、ぼかし、広がり、不透明度、および inset を個別に微調整できます
- クリーンな出力 — スタイルシートに貼り付ける準備ができた、適切にフォーマットされた CSS を取得します
- プライバシー — すべてがブラウザでローカルに実行されます
FreeToolbox と他のシャドウジェネレーターの比較
| 機能 | FreeToolbox | cssmatic.com | shadows.brumm.af |
|---|---|---|---|
| マルチレイヤー | 最大 5 | 単一 | 無制限 |
| Inset 切り替え | はい | はい | いいえ |
| 不透明度コントロール | はい | 制限あり | はい |
| 広告 | 最小限 | 多い | なし |
| ダークテーマ | はい | いいえ | はい |
よくある質問
ぼかしと広がり（spread）の違いは何ですか？
ぼかしは、シャドウのエッジがどれだけ柔らかく/拡散されるかを制御します。広がりは、シャドウが要素のサイズからどれだけ拡張または縮小するかを制御します。正の広がりは大きくし、負の広がりは小さくします。
複数のシャドウを追加できますか？
はい。「レイヤーを追加」をクリックして、最大 5 つのシャドウレイヤーを重ねることができます。各レイヤーには、すべてのパラメーターに対する独立したコントロールがあります。
Inset は何をしますか？
Inset は、シャドウを外側ではなく要素の内側に移動し、内側のシャドウまたは押し込まれたような効果を作成します。
テキストシャドウにも使えますか？
このツールは box-shadow CSS を生成します。Text-shadow は同様の構文を使用しますが、spread 値または inset オプションはありません。手動で出力を調整できます。
このツールは無料ですか？
はい、完全に無料で、制限や登録は必要ありません。