🌈 高度CSSグラデーション生成器

CSSグラデーション生成器について

このツールは、CSSグラデーションを視覚的に構築します。リニア・ラジアル・コーンを選び、カラーストップを好きなだけ追加し、位置と角度を設定して、生成されたCSSをそのままプロジェクトにコピーできます。編集はすべてリアルタイムで反映されます。

グラデーションタイプ

• リニア——選択した角度の直線に沿って色がブレンド。
• ラジアル——中心から外側へ色が放射状に広がる。
• コーン——中心点の周りをパイのように色が回る。

使い方

1. グラデーションタイプを選びます。
2. リニアの場合、角度スライダーで方向を回転。
3. ストップのカラーボックスをクリックして色を変更、位置スライダーで移動。
4. ストップ追加で色を追加、ストップ右の × で削除。
5. CSS コピーで生成された background 宣言をコピー。

よくある質問

出力されるCSSは？ 任意のスタイルシートやインラインスタイルに貼り付けられる単一の background: ...gradient(...); 宣言です。

カラーストップはソートされますか？ はい。生成前に位置でソートされ、常に綺麗にレンダリングされます。

透明度に対応していますか？ HEXカラーを使用可能。完全なアルファ制御が必要な場合は、貼り付けたCSSを rgba() に編集してください。