CSSグラデーション生成器

概要 CSSグラデーション生成器?

CSSグラデーションをビジュアルエディタで作成し、すぐに使えるCSSコードを出力するツールです。線形・放射状・円錐グラデーションに対応し、色、角度、カラーストップをインタラクティブに調整でき、手書きの構文推測の手間を省けます。

使い方

1. グラデーションタイプ（線形、放射状、円錐）を選択してください
2. グラデーションバーをクリックしてカラーストップを追加・配置してください
3. グラデーションの角度や方向を調整してください
4. 生成されたCSSコードをコピーしてスタイルシートに貼り付けてください

計算式

よくある質問

線形と放射状グラデーションの違いは？

線形グラデーションは直線に沿って遷移します（例: 上から下）。放射状グラデーションは中心点から円形または楕円形で外側に向かって遷移します。

3色以上も使えますか？

はい、CSSグラデーションは無制限のカラーストップに対応しています。複数の色を追加し、グラデーションライン上の特定のパーセント位置に配置できます。

CSSグラデーションはすべてのブラウザで動作しますか？

最新のCSSグラデーションはすべての現行ブラウザで対応しています。-webkit-プレフィックスが必要なのは2014年以前の非常に古いSafariのみです。