CSSグラデーションジェネレーター

CSSグラデーションジェネレーターとは#

CSSグラデーションジェネレーターは、直線・円形・円錐のグラデーションを作り、CSSやTailwind v4のクラスとしてコピーするツールです。

プレビューは変更のたびに更新され、コピーするコードと画面の見た目は一致します。配色に迷うときは、プリセットやシャッフルが使えます。

使い方#

1. グラデーションの種類を選び、角度・形状・中心の位置を決めます。
2. 色を並べます。色の帯をクリックすると停止点が増え、つまみをドラッグすると移動します。
3. CSSまたはTailwindクラスとしてコードをコピーします。

不透明度・位置・出力の切り替えはその場で反映されます。プリセットは現在のグラデーションを1クリックで置き換え、シャッフルは種類を保ったまま新しい組み合わせを作ります。

種類と設定項目#

• 直線：角度で向きを決めるグラデーションです。
• 円形：中心から外へ広がります。円は形を保ち、楕円は要素に合わせて伸びます。
• 円錐：中心の周りを回ります。リングや円グラフ風の塗りに向いています。
• 停止点：色・不透明度・位置を持つ点で、2つ以上必要です。色の帯や追加操作で増やすと、その地点の色を拾うので見た目はほとんど変わりません。均等に並べ直したり、左右に反転したりできます。
• 出力：CSSはbackground-imageの宣言、Tailwindはv4のクラスです。単純な直線は方向ユーティリティ、それ以外は任意値クラスになります。
• 色表記：HexまたはOKLCHです。不透明度は色に含めます。

活用シーン#

• ボタンやカードの背景に、主張を抑えた2色のグラデーション。
• ブランドカラーからページ背景へつなげるヒーローセクション。
• 料金表や機能紹介の背景に敷く円形のハイライト。
• 円グラフ風の塗りやダイヤル、装飾リングに使う円錐の回転。

よくある質問#

注意点#