CSSシャドウジェネレーター について
ライブプレビュー、プリセット、本番環境対応のCSS出力でマルチレイヤーのbox-shadowとtext-shadowエフェクトをデザインします。すべてブラウザ内で動作します。
CSSシャドウジェネレーター の使い方
- 1Box ShadowとText Shadowモードを選択します。
- 2シャドウのプロパティを調整します：オフセットX/Y、ぼかし、広がり（boxのみ）、色。
- 3深度エフェクト用に複数のシャドウレイヤーを追加します。各レイヤーには独立した制御があります。
- 4「内側」を切り替えてインナーシャドウ（box shadowのみ）にします。
- 5プリセット（さりげない、中、強い、ネオングロー、レイヤード深度）を試すか、独自のものを構築します。
- 6プロジェクト用にCSS出力をコピーします。
ヒント
- レイヤードシャドウ（不透明度が段階的に減少する3層以上）は最もリアルな深度エフェクトを作成します。
- 暗い背景に明るい色のネオングローシャドウは、CTAに印象的なビジュアルエフェクトを作ります。
- カードや入力フィールドにはさりげないシャドウ（1-4pxぼかし、低い不透明度）を使用してください。重いシャドウは古く見えることがあります。
無料 vs 有料の制限
無料：レイヤー数制限あり。Starter以上：追加シャドウレイヤー。
OneKitTools チーム更新日 2.21.4