1. Color Stops (Click Bar to Add)
Presets
2. Color Picker
Direction
90°
GRADIENT
CSS BACKGROUND
CSS TEXT CLIP
もう迷わない！直感操作で理想のグラデーションを作成
Webデザインにおいて、サイトの印象をガラリと変える「グラデーション」。 しかし、CSSで書こうとすると linear-gradient の構文を思い出したり、色の割合を計算したりと意外に手間がかかりますよね。
このツールは、まるでプロ用のデザインソフト（FigmaやIllustratorなど）を使っているかのような感覚で、直感的かつスピーディーにCSSグラデーションを作成できるジェネレーターです。
このツールの「ここが便利！」
1. プリセットから選ぶだけ
「色の組み合わせが思いつかない…」という時も安心。画面上部にあるプリセットボタンをクリックするだけで、デザイナー厳選の美しい配色が即座に反映されます。そこから微調整するだけで、オリジナルのグラデーションが完成します。
2. 直感的なカラーバー操作
一番上の「Color Stops」バーをクリックすると、その場所に新しい色（ストップ）を追加できます。
- 追加: バーをクリック（左隣の色を継承するので自然に馴染みます）
- 移動: 丸いツマミを左右にドラッグ
- 削除: 色を選択して「Delete」ボタンをクリック
3. こだわりのカラーピッカー
色相（色味）と、彩度・明度を別々に調整できるプロ仕様のピッカーを搭載。 WordPressなどの管理画面からコピーしたHEXコード（#……）を直接入力して指定することも可能です。
4. 文字グラデーションも一発コピー
背景用のCSSだけでなく、実装が少しややこしい「文字のグラデーション（テキストクリップ）」用のCSSも同時に生成されます。 見出し（h2など）にクラスを当てるだけで、流行りのリッチなタイポグラフィが実現します。
活用アイデア
- メインビジュアルの背景に: 角度を「135°（右下へ）」や「45°（右上へ）」にして、少し淡い色同士を混ぜると、奥行きのある今っぽい背景になります。
- ボタンのホバーエフェクトに: 通常時とホバー時で「角度」だけを少し変える（例: 90° → 180°）と、色が流れるような美しいアニメーションボタンが作れます。
- 強調したいキーワードに: 「文字用CSS」をコピーして
spanタグなどに適用すれば、文章の中でそこだけキラリと光るような演出が可能です。
ぜひ、ブックマークして日々の制作にお役立てください！
