読み込み中...
読み込み中...
linear・radial・conic グラデーションを視覚的に作成。複数 stop、HEXA、Tailwind utility / arbitrary value 出力まで1画面で完結します。
HEX と HEXA（8桁HEX）に対応。位置は自動で昇順に整列して出力します。
background: #667eea;
background: linear-gradient(to right, #667eea 0%, #764ba2 100%);働き方を見直すなら
関連する選択肢をまとめて確認できます。
※ PRリンクを含みます
CSSグラデーションとは、2つ以上の色を滑らかに変化させる背景効果です。 Webデザインにおいて、ボタン・ヘッダー・背景などに立体感や華やかさを加えることができます。 当ツールでは、カラーコード変換や配色パレットの色を使って、 視覚的にグラデーションを作成し、CSSコードやTailwind utility / arbitrary value としてコピーできます。
ポイント：CSSグラデーションは画像不要でファイルサイズが軽く、レスポンシブにも対応。 パフォーマンスの良いWebサイト構築に最適です。
🌈
linear / radial / conic を切り替えながら、用途に合う背景表現を選べます。
🎯
最大8つのカラーストップと custom angle を組み合わせて細かく調整できます。
🫧
#667EEACC のような透明度付きHEXも stop に使えるため、透け感のある背景も作れます。
🧭
stop を並べ替えなくても、指定したパーセンテージ順にCSSへ反映されます。
📦
単純な2色線形は utility class、複雑なグラデーションは arbitrary value として出力します。
⚡
プリセット選択からコードコピーまで無料・登録不要で利用できます。
| 種類 | CSS関数 | 用途 |
|---|---|---|
| 線形 | linear-gradient() | 最も一般的。背景・ボタンに |
| 放射 | radial-gradient() | 円形の広がり。スポットライト効果 |
| 円錐 | conic-gradient() | 時計回りの変化。パイチャート風 |
| 繰り返し線形 | repeating-linear-gradient() | ストライプパターンの作成 |
| 繰り返し放射 | repeating-radial-gradient() | 同心円パターンの作成 |
CSSグラデーションは、2つ以上の色を滑らかに変化させる背景効果です。 linear-gradient（線形）、radial-gradient（放射）、conic-gradient（円錐）の3種類があります。
background: linear-gradient(方向, 色1 位置%, 色2 位置%); のように指定します。 方向は「to right」「45deg」などで指定できます。当ツールで視覚的に作成してCSSコードをコピーできます。
2色の線形グラデーションは bg-gradient-to-r from-[#色1] to-[#色2] のような utility class で実装できます。 多色 stop・custom angle・radial / conic は Tailwind arbitrary value 構文の class を使うと、そのまま再現できます。
はい。#667EEACC のような透明度付きHEXも stop に設定できます。 透明感のある背景やオーバーレイを試したいときに便利で、CSS / Tailwind 出力にもそのまま反映されます。
カラーストップは、グラデーション内の色とその位置（%）を指定するポイントです。 2つ以上のカラーストップを設定することで、複雑なグラデーションを作成できます。
はい、完全無料でご利用いただけます。登録やインストールも不要です。すべての処理はブラウザ内で行われます。