CSS3コードジェネレーター

角丸や影の値を見ながらCSSにする

CSS3コードジェネレーターは、見た目を調整しながらCSSの宣言を作り、プレビューしてコピーするためのツールです。選べる効果は、四隅の角丸、ボックスシャドウ、線形グラデーション、transformの4種類です。値を変えるとサンプル表示とコードが連動します。出力は完成したサイトや部品一式ではなく、`.generated-box`というセレクターを含むCSSのひな形です。

border-radiusは要素の角の丸み、box-shadowは要素の外側または内側に見せる影を指定します。線形グラデーションは色の変化する方向と色の停止位置を持ち、transformは移動・回転・拡大縮小・傾斜を組み合わせます。こうした宣言を既存のデザインに合わせて調整する前段として、値の対応関係を確かめられます。

この画面では背景色、文字色、枠線の色と幅も選べます。これらは生成コードに含まれますが、4種類の効果とは別の基本スタイルです。各効果の規格上の意味と構文は、MDN Web Docs：border-radius、MDN Web Docs：box-shadow、MDN Web Docs：linear-gradient()、MDN Web Docs：transformの資料で確認できます（2026年10月1日確認）。

プレビューからCSSをコピーする

1. 効果を選ぶ

   角丸、ボックスシャドウ、グラデーション、transformのいずれかを選択します。プレビューには同じサンプル要素が表示されます。

2. 値と色を調整する

   角丸は左上・右上・右下・左下を個別に設定できます。影は横と縦のずれ、ぼかし、広がり、色、透明度、内側に表示するかを調整します。グラデーションは角度、始点と終点の色および位置を指定します。transformでは移動量、回転角、縦横の倍率、傾きを組み合わせます。

3. 現在値と出力を確認する

   プレビューで印象を見た後、現在のプロパティ値かCSSコード欄を確認してコピーします。出力には背景色、文字色、枠線、角丸が含まれ、選んだモードに応じて影・グラデーション・transformの宣言が加わります。

4. 実際のセレクターに組み込む

   コード内の`.generated-box`をプロジェクトで使うクラス名に置き換えるか、必要な宣言だけを既存ルールへ移します。実ページで優先順位や他のスタイルとの競合を確認してください。

出力を読む例

角丸の四隅をすべて12pxにすると、出力値はborder-radius: 12px 12px 12px 12px;の形になります。四隅を別々に調整した場合は、4つの値が左上から時計回りに並びます。画面の現在値表示にはプロパティ名も付くため、宣言を一つだけコピーしたいときに使えます。

生成範囲と調整の疑問

実装前に確認したい範囲

• 生成値の単位や範囲は各モードで異なります。角丸・影・移動量はpx、グラデーション角度や回転・傾きはdeg、色位置は%で表示されます。拡大縮小は倍率です。必要な値を範囲外へ設定する機能や、任意単位への切り替えはありません。
• プレビューは共通のサンプル要素に対する表示です。実ページの大きさ、フォント、周囲の要素、別のCSSルールによって仕上がりは変わります。貼り付け後に対象ブラウザーと画面幅で確認してください。
• 出力に含まれる`.generated-box`は例示用のセレクターです。同じ名前を複数箇所で使うと意図しない要素にも適用されることがあるため、既存サイトでは適切なクラス名に変更してください。
• グラデーションは線形のみ、色は2点のみです。文字影、transition、キーフレームアニメーション、レイアウト規則などのCSSはこのツールの出力対象ではありません。