CreaTools LogoCreaTools
Tech Notes
Gradient Maker

Gradient Makerの使い方｜Linear/Radialを視覚的に作成してCSSを出力

2025-11-12

:::note ※Gradient Makerの操作方法と、目的別の「導線ハブ」記事です :::

結論（30秒で分かる要点）

  • 何ができるか：Linear / Radial グラデーションを視覚的に作成し、CSS・Tailwind形式で出力
  • こんな人向け：角度や座標を数値で考えるより「目で見て決めたい」人
  • 使い方：プリセットから始めるか、カラーストップを直接調整 → コピーして実装

🚀 今すぐ試す → Gradient Maker を開く

このツールで解決できる課題

課題解決方法
角度を数値で指定するのが面倒スライダーで視覚的に調整
radial-gradient の中心位置が分からないプレビューをクリックして位置を決める
色の組み合わせに自信がない18種のプリセットから始められる
Tailwind形式でコードが欲しいワンクリックで Tailwind/CSS を切り替え

基本の使い方

ステップ1：グラデーションタイプを選ぶ

タイプ特徴用途
Linear直線的に色が変化背景、ボタン、オーバーレイ
Radial中心から円形に広がるスポットライト、ヒーローセクション

※ conic-gradient は非対応

ステップ2：カラーストップを調整

  • バー上のハンドルをドラッグして位置調整
  • 色はカラーピッカーまたはHEXコードで指定
  • 最小2色、最大10色まで追加可能

ステップ3：出力形式を選んでコピー

  • CSS：そのまま使える形式
  • Tailwind：arbitrary value 形式
  • ワンライナー：background プロパティ値のみ

Linear グラデーション設定

角度の調整

スライダーまたは数値入力で 0〜360度 を設定。クイック選択ボタンあり。

角度方向よく使う場面
0°下→上あまり使わない
90°左→右横方向のボタン
135°左上→右下カード、ヒーロー（推奨）
180°上→下縦方向の背景

迷ったら 135° か 90° から始めると失敗しにくい。

📚 角度の詳細 → linear-gradientの角度を正しく理解する

Radial グラデーション設定

項目説明
形状Circle（正円）/ Ellipse（楕円）
中心位置X / Y を 0〜100% で指定、プレビューをクリックしても調整可能

形状の選び方

  • Circle：ボタン、アイコン、正方形に近い要素
  • Ellipse：ヒーローセクション、横長の要素

📚 中心位置の詳細 → radial-gradientの中心と形状を制御する

プリセット（18種）

プリセットから始めて微調整するのが最も効率的。

Classic（6種）

Sunset, Ocean, Forest, Fire, Midnight, Peach

和風（3種）

藍 (Ai), 抹茶 (Matcha), 紅 (Kurenai)

Modern（3種）

Aurora, Cyber, Neon

Business（3種）

Business, Steel, Slate

Radial専用（3種）

Radial Glow, Spotlight, Soft Light

出力形式

CSS形式

.gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Tailwind形式

<div class="bg-[linear-gradient(135deg,_#667eea_0%,_#764ba2_100%)]">
  ...
</div>

ワンライナー（値のみ）

linear-gradient(135deg, #667eea 0%, #764ba2 100%)

変数に代入したい場合やSassで使う場合に便利。

適用イメージの確認

プレビューエリアで3種類の適用イメージを確認できる：

プレビュー確認できること
角丸ボックス一般的なUI要素での見え方
円形アイコン、アバターでの見え方
グラデーションテキスト見出しでの見え方

📚 テキストへの適用方法 → CSSでグラデーション文字を作る

よくある使い方

ボタンのグラデーション

  1. Linear を選択
  2. 角度を 90° に設定
  3. 2色を選択
  4. CSSをコピーして適用

ヒーローセクションのオーバーレイ

  1. Linear を選択
  2. 角度を 180°（上→下）に設定
  3. 開始色を rgba(0,0,0,0.3)、終了色を rgba(0,0,0,0.7) に設定
  4. CSSをコピーして画像と組み合わせる

📚 オーバーレイの実装 → 画像にグラデーションオーバーレイをかける

スポットライト効果

  1. Radial を選択
  2. 形状を Ellipse に設定
  3. 中心位置をプレビュー上でクリックして調整
  4. 開始色を明るく、終了色を透明に設定

作ったグラデーションをどこに使う？

適用先読むべき記事理由
ボーダーグラデーションボーダー角丸との相性問題を事前に知る
画像の上グラデーションオーバーレイ透明度の目安を知る
テキストグラデーション文字Safari対応の罠を避ける
動かすグラデーションアニメーションパフォーマンス問題を避ける

構文を深く理解したい場合：

まとめ

条件推奨アクション
色の組み合わせに迷うプリセットから選んで微調整
角度を決められない135° から始めてスライダーで調整
radialの中心が分からないプレビューをクリックして視覚的に決める
Tailwindで使いたい出力形式を切り替えてコピー

🚀 Gradient Maker を開く