CSSジェネレーター
グラデーション・ボックスシャドウ・角丸のCSSを視覚的に生成（ブラウザ内処理）
設定
カラーストップ
位置は0〜100%の整数です。CSSには位置の小さい順に並べて出力します。
プレビュー
生成されたCSS
ブラウザ内で処理
処理はブラウザ内で行い、入力した内容をサーバーへ送信しません。
使い方
- 上部のタブで生成したいCSS（グラデーション / ボックスシャドウ / 角丸）を選びます。
- スライダーやカラーピッカーを操作すると、右側のプレビューがリアルタイムに更新されます。
- 生成されたCSSコードを確認し、「コピー」ボタンでクリップボードに取得します。
- 取得したコードを、お使いのスタイルシートに貼り付けてご利用ください。
対応プロパティ
グラデーション
linear-gradient / radial-gradient。線形は角度（0〜360°）、放射は円か楕円を選べます。カラーストップは2つ以上いくつでも追加できます。
ボックスシャドウ
X/Y・ぼかし・広がり・色・不透明度・insetを設定。複数レイヤーの重ねがけも可能。
角丸 (border-radius)
四隅を個別に、または「全て連動」で一括調整。値の組み合わせに応じて1〜4個の値の短い書き方で出力します。
ライブプレビュー
操作に合わせて結果を即座に反映。仕上がりを見ながら調整できます。
ワンクリックコピー
生成されたCSSをそのままコピー。プロパティ名付きで貼り付けられます。
ブラウザ内で処理
処理はブラウザ内で行い、入力した内容をサーバーへ送信しません。
生成されるCSSの仕様
- グラデーション：
background: linear-gradient(90deg, #ff8a5c 0%, #ffd166 100%);の形で出力します。放射（radial）は中心から広がり、「円」ならcircle、「楕円」ならellipseを指定します（大きさは中心から最も遠い角まで）。角度は線形のときだけ使います。 - カラーストップ：位置（%）の小さい順に並べて出力します。位置が同じストップは一覧の順です。「ストップ追加」は、間隔がいちばん広い2つのストップの中間の位置に、2色の中間色で追加します。ストップは最低2つ必要で、2つのときは削除できません。
- ボックスシャドウ：
box-shadow: [inset] X Y ぼかし 広がり 色;の順で、複数のレイヤーはカンマで区切り、一覧の上のレイヤーほど手前に表示されます。不透明度が100%のときは色を#rrggbb、それ以外はrgba(r, g, b, 不透明度)で出力します。 - 角丸：値は「左上 右上 右下 左下」の順です。4つが同じなら1つ（
24px）、左上と右下・右上と左下がそれぞれ同じなら2つ（24px 8px）、右上と左下だけが同じなら3つ（24px 8px 0px）、それ以外は4つの値で出力します。 - 全て連動：オンのときはどれか1つの角を動かすと4つとも同じ値になり、オフからオンに切り替えると4つの角が左上の値にそろいます。
- スライダーの範囲は、角度0〜360°、影のX・Y −100〜100px、ぼかし0〜100px、広がり −50〜100px、角丸0〜200pxで、すべて整数です。ベンダープレフィックス（-webkit- など）は付けません。