🧩 CSSジェネレーター・プレイグラウンド
1つのプレビュー要素に、角丸（border-radius）・影（box-shadow）・グラデーション背景・filter・transform を重ねて調整し、リアルタイムで見た目を確認できます。既定値から変更したぶんだけを、まとめた .box { … } のCSSとして出力・コピーできます。専用ジェネレーターを行き来せず、1画面でスタイル一式を組み立てられます。
プリセット
角丸 border-radius
影 box-shadow
背景グラデーション background
効果 filter
既定値（明るさ・彩度・コントラストは100%、他は0）から動かした関数だけが出力されます。
変形 transform
translate → rotate → scale → skew の順で、既定値（移動0・回転0・拡大1・傾き0）から動かしたぶんだけを出力します。
生成されたCSS（.box に適用）
.box { }
解説
CSSジェネレーター・プレイグラウンドは、1つのプレビュー要素（.box）に対して複数のCSSプロパティを同時に重ね、見た目をリアルタイムで確認しながら「一式のスタイル」を組み立てるツールです。角丸・影・グラデーション背景・filter（効果）・transform（変形）は、実際のUI部品では単独ではなく組み合わせて使われます。専用ジェネレーターを1つずつ開いて値をコピーし、貼り合わせる手間を省き、この1画面で完結できるのが特徴です。
出力は「既定値から変更したぶんだけ」に絞られます。border-radius は4隅の値を最短のショートハンド（左上→右上→右下→左下の時計回り）に畳み、box-shadow は不透明度をrgbaのアルファに変換します。filter と transform は、明るさ100%・拡大1・回転0など“何もしていない状態”の関数を自動的に除外するため、コピーしたCSSに無駄な指定が混ざりません。結果は .box { … } のブロックとして表示され、そのまま自分のクラスへ貼り付けられます。
各プロパティには役割の違いがあります。border-radius は要素そのものの角の形、box-shadow は要素の外（または inset で内）に落ちる影、background のグラデーションは塗り、filter はぼかしや彩度など描画後の画像的な加工、transform は移動・回転・拡大・傾きといった座標変換です。とくに transform は関数の並び順で結果が変わるため、本ツールは translate → rotate → scale → skew という一般的な順序で固定して出力します。プリセットを起点に各スライダーを触ると、プロパティ同士の関係を体感的に理解できます。
より細かい調整や、この画面に無いオプション（box-shadow の多重掛け、グラデーションの3色以上のストップ、drop-shadow フィルターや transform-origin の指定など）が必要なときは、各専用ジェネレーターの利用が向いています。本ツールは「まず全体のバランスを1画面で素早く決める」ための入口、専用ツールは「1プロパティを深く詰める」ための場所、という使い分けがおすすめです。すべての処理は端末内（ブラウザ内）で行われ、入力内容はどこにも送信されません。
よくある質問
このツールと個別のジェネレーターの違いは何ですか？
個別のジェネレーター（border-radius・box-shadow・グラデーション・filter・transform）は1プロパティを深く調整するのに向きます。本ツールはそれらを1つのプレビューにまとめ、複数プロパティを同時に重ねて全体のバランスを素早く決めることに特化しています。まず本ツールで大枠を作り、細部は専用ツールで詰める使い方が効率的です。
出力されるCSSに一部のプロパティが含まれないのはなぜですか？
「既定値から変更したぶんだけ」を出力する仕様だからです。角丸が全隅0、影とグラデーションが無効、filter が初期値（明るさ100%など）、transform が初期値（拡大1・回転0など）の場合、そのプロパティは行ごと省かれます。無駄な指定を含まないCSSを得るためのしくみです。
border-radius が「12px 0 0 12px」のように短くまとまるのはなぜですか？
CSSのショートハンド規則に従い、末尾から連続する同値を省略して最短形にしているためです。値は左上→右上→右下→左下の時計回りで並びます。4隅が同じなら1つ、上下対称なら2つ、というように、意味が変わらない範囲で短く表示します。
transform の関数の順番は変えられますか？
本ツールでは translate → rotate → scale → skew の一般的な順序に固定しています。transform は関数の並び順で結果が変わりますが、多くの用途ではこの順序で問題ありません。順序自体を細かく制御したい場合は、専用の transform ジェネレーターや手書きでの調整が向いています。
影を複数重ねたり、グラデーションを3色以上にできますか？
本ツールは1画面で全体を決める用途のため、box-shadow は1つ、グラデーションは2色ストップまでに絞っています。多重の影や3色以上のストップ、drop-shadow フィルター、transform-origin などが必要な場合は、それぞれの専用ジェネレーターをご利用ください。ページ下部の関連ツールから移動できます。
filter のぼかしを強くするとプレビュー全体がぼやけます。仕様ですか？
はい。filter は要素の描画結果そのものに作用するため、blur を上げると .box の縁や文字を含めて全体がぼけます。これはCSSの filter の本来の挙動です。背景だけをぼかしたい場合は backdrop-filter など別のプロパティが必要で、本ツールの対象外です。
生成したCSSは自分のHTMLでそのまま使えますか？
はい。出力は .box というクラスに対する標準的なCSSです。クラス名を自分の要素に合わせて書き換えれば、そのまま利用できます。プレビューと同じ見た目にするには、要素に幅・高さと（グラデーションを使わない場合は）背景色を別途指定してください。
入力した内容はサーバーに送られますか？
送られません。CSSの生成はすべてブラウザ内で完結し、設定値や生成結果はどこにも送信されません。オフラインでも利用できます。