グラデーションの作り方・使い方

CSSグラデーションは linear-gradient()・radial-gradient()・conic-gradient() の3種類が基本です。本ツールは一覧からプリセットを選び、モーダルで色の位置（カラーストップ）を微調整して、CSSとTailwindの両方のコードをそのままコピーできます。

3種類のグラデーションの違い

• linear（線形）：直線方向に色が変化。角度で向きを指定します。ボタンや見出し背景の定番。
• radial（放射）：中心から外側へ放射状に変化。スポットライトや柔らかい背景に向きます。
• conic（扇形）：中心を軸に角度方向へ変化。円グラフ風の表現やカラーホイールに使えます。

使い方

1. 一覧からプリセットを選ぶ（または「新規作成」で白紙から）。
2. モーダルでカラーストップのバーをクリックして色を追加し、つまみをドラッグして位置を調整。つまみのダブルクリックで削除できます。
3. 選択中のストップの色は、カラーピッカーまたは色の辞書から指定。
4. 種別（線形・放射・扇形）と角度・形状を調整。
5. 適用先を「背景」か「文字」で切り替える。文字を選ぶと出力コードが文字グラデーション用に変わります。
6. CSS / Tailwind を切り替えてコードをコピー、または画像が必要ならPNGで書き出し。

背景と文字をワンクリックで切り替える

同じグラデーションを背景に敷くか文字そのものに流し込むかは、モーダル上部の「適用先」で切り替えられます。作り直す必要はありません。切り替えると出力されるコードも自動で変わります。

「文字」を選ぶと、プレビューに実際の見出し文言を入力して確認できます。長い文言ではグラデーションのかかり方が変わるため、本番で使う文言を入れて確かめるのが確実です。あわせてフォントもGoogleフォントから選べます（明朝・ゴシック・丸ゴシック・欧文など）。フォントによって字面の太さや隙間が変わり、グラデーションの見え方も変わります。

文字グラデーションは、グラデーションを背景として敷いたうえで background-clip: text で字面の形に切り抜き、文字色を透明にすることで実現します。CSS宣言だけでは「どの要素に当てるか」が分からず動かないため、出力にはHTMLとフォントの読み込みもまとめて含めています。そのままコピーすれば動きます。

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@700&display=swap" />

<h2 class="gradient-text">グラデーション見出し</h2>

<style>
.gradient-text {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  background-image: linear-gradient(135deg, #b7282e 0%, #f6d8a8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>

-webkit-background-clip はSafariや一部の環境で必要なため、標準プロパティと併記しています。文字色を消すのに color: transparent ではなく -webkit-text-fill-color を使っているのは、こちらのほうが確実に効き、テキスト選択時の見え方も保たれるためです。Tailwindを選んだ場合は、同じ内容が font-['Zen_Maru_Gothic'] font-bold bg-[...] bg-clip-text text-transparent というクラス付きの1行に変わります。

文字モードのときは「PNGで書き出し」も文字の形に合わせて動き、背景が透明なPNGとして保存されます。バナーやサムネイルにそのまま重ねられます。

和グラデーションと色の辞書連携

茜・藤・群青・桜・紅葉といった日本の伝統色を使った和グラデーションのプリセットを273種類用意しています。色相順に並んでいるので、目的の色合いを探しやすくなっています。さらに「色の辞書から選ぶ」では、色の辞書に収録した伝統色とCSS名前付き色を直接ストップに適用できるので、配色の意図を保ったままグラデーションに落とし込めます。

よくある質問

関連ツール