CSS シャドウジェネレーター

CSS シャドウジェネレーターとは？

CSS シャドウジェネレーターは、Web 要素の box-shadow や text-shadow をビジュアル操作で作成できる無料のオンラインツールです。コードを書く必要はありません -- スライダーやパネルでパラメーターをリアルタイム調整し、完成した CSS コードをワンクリックでコピーできます。

主な機能

• 7つの基本パラメーター -- X/Y オフセット（-100~100px）、ブラー半径（0~100px）、スプレッド半径（-50~50px）、シャドウ色、不透明度（0~100%）、インセット切替
• 8つのプリセットスタイル -- ホバーカード、ニューモフィズム、ソフトシャドウ、内部グロー、ハードシャドウ、デュアルレイヤー、カラフル、ボタン押下
• 12のデザインスタイル -- フロート、浮き出し、くぼみ、ソフト、シャープ、グロー、ネオン、エンボス、デュオ、ロングシャドウ、インセットソフト、オーロラ
• マルチレイヤーシャドウ -- 最大5レイヤーまで、各レイヤーを個別に調整可能、ドラッグ＆ドロップで並べ替え
• HSL カラーモード -- Hex と HSL の双方向同期に対応
• ワンクリックニューモフィズム -- ベースカラーを入力するだけで明暗2色のシャドウ値を自動計算
• 段階シャドウジェネレーター -- 現在のパラメーターから Low/Medium/High のシャドウコードを自動生成
• ホバーアニメーションプレビュー -- ホバー時のシャドウ変化をシミュレーション
• 複数の出力モード -- WebKit プレフィックス、CSS 変数出力、text-shadow モード切替に対応
• スクリーンショットエクスポート -- プレビューを PNG 画像としてエクスポート

使い方

• パラメーター調整 -- スライダーまたは数値入力で各シャドウパラメーターを調整。プレビューはリアルタイムで更新されます
• プリセット / スタイルを選ぶ -- プルダウンからプリセットを選択するか、スタイルタグをクリックすると人気のシャドウ組み合わせを即座に適用
• マルチレイヤー管理 -- 「レイヤー追加」でレイヤーを追加し、ドラッグで並べ替え、不要なレイヤーは削除可能
• コードをコピー -- ツールバーの「CSSをコピー」ボタン、またはコードエリア横のコピーボタンをクリック
• 保存 & 共有 -- パラメーターは自動的にブラウザの localStorage に保存されます。URL ハッシュ経由で設定を共有することも可能

プライバシー

すべての処理はブラウザ内で完結します。サーバーにデータがアップロードされることは一切ありません。安心してご利用いただけます。