aduce ops

CSS グラデーション生成

linear / radial / conic グラデーションを GUI で生成。 プリセット 12 種、CSS と Tailwind v4 用コードを同時出力。

linear-gradient
カラーストップ（2 / 8）
#5563F7
%
#8B5CF6
%
CSS
background: linear-gradient(135deg, #5563F7 0%, #8B5CF6 100%);
Tailwind v4
bg-[linear-gradient(135deg,_#5563F7_0%,_#8B5CF6_100%)]

CSS グラデーション生成ツールとは

本ツールは、CSS の linear-gradient / radial-gradient / conic-gradient を GUI で組み立て、CSS と Tailwind v4 のクラスを 同時に生成する無料オンラインツールです。 ストップ追加・色指定・角度変更がリアルタイムでプレビューされ、 定番カラーパレットのプリセット 12 種から ワンクリックで適用できます。

3 種類のグラデーション

linear-gradient — 直線グラデーション

最も基本的な形式で、角度とカラーストップを指定します:

background: linear-gradient(135deg, #FF6E7F 0%, #BFE9FF 100%);

角度は CSS の慣習で時計回り・上方向 = 0deg。 135deg は左上 → 右下方向です。

radial-gradient — 放射状グラデーション

中心から外側へ広がる形。形状を circle /ellipse から選択します:

background: radial-gradient(circle at center, #FF6E7F 0%, #BFE9FF 100%);

closest-side / farthest-corner 等のサイズキーワードで 広がり方を細かく制御できます。本ツールは代表的な 4 種類を選択可能。

conic-gradient — 円錐グラデーション

中心を軸に時計回りに色が回転するタイプ。円グラフや モダンなロード中インジケータで頻出します:

background: conic-gradient(from 135deg at center, #FF6E7F 0%, #BFE9FF 100%);

from で開始角度を指定。色相環のような表現にも使えます。

カラーストップの位置指定

各ストップに 0% 〜 100% の位置を指定すると、 色の変化開始点を細かく制御できます:

  • 0%, 100%（標準）→ 全体に均等にグラデーション
  • 0%, 30%, 70%, 100%（4 ストップ）→ 中央付近で停滞、両端で変化
  • 0%, 50%, 50%, 100%（同位置で 2 色）→ くっきりした境界線（単色 2 帯のような見た目）

Tailwind v4 用クラス

Tailwind の任意値クラス記法 bg-[...] で、 ユーティリティクラスを書かずにグラデーションを直接指定できます:

<div class="bg-[linear-gradient(135deg,#FF6E7F_0%,#BFE9FF_100%)]">...</div>

本ツールは空白を _（アンダースコア）に置換した Tailwind v4 互換のクラス文字列を出力します。 コピーしてそのまま className に貼り付けられます。

ブラウザ対応とパフォーマンス

  • linear-gradient / radial-gradient: すべての モダンブラウザで対応（IE は対象外）
  • conic-gradient: Safari 12.1+ / Chrome 69+ / Firefox 83+ で対応。古い iOS Safari ではフォールバック必要
  • グラデーションは GPU で合成されるためアニメーションは比較的軽量。 ただし大領域 conic-gradientは描画コストが高くなる傾向あり
  • 頻繁に色を変えるアニメーションは background-image の 差し替えではなく、opacity / transform 経由が望ましい

アクセシビリティ

グラデーション背景の上に文字を載せる場合、両端の色とテキスト色のコントラスト比を確認してください。WCAG AA 基準では 通常テキストで 4.5:1 以上が必要です。背景の中央付近では色が混じるため、 端の色だけでなく位置による可読性の変化も考慮します。

色だけで意味を伝えない（例: 必須項目を「赤グラデーション」で示すだけ） ことも重要です。テキスト・アイコン・ボーダーで意味を補強しましょう。

使い方の流れ

  1. 近いプリセット（Sunset / Ocean / Mint 等）をクリック
  2. 必要に応じて種類タブで Linear/Radial/Conic を切替
  3. ストップを追加・削除・色変更で調整
  4. 角度（linear/conic）または形状（radial）で向きを指定
  5. 「コピー」で CSS または Tailwind 用コードを取得

関連ツール

プライバシー

操作内容はすべてブラウザ内で処理され、弊社サーバには送信しません。

関連ツール