Gradient

CSS グラデーションジェネレーター

リニア・ラジアル・コニックグラデーションを、無制限のストップ、OKLCH 対応補間、Tailwind v4 ユーティリティ出力で作成。ライブプレビュー、30 以上のプリセット、すべてブラウザ内で。

Linear は指定した角度の直線に沿ってブレンドします(0° = 上方向、90° = 右方向)。Radial は中心点から外側へブレンド — circle または ellipse、farthest-corner などのサイズキーワードに対応。Conic は中心点を軸に回転 — カラーストップは時計の針のように角度に配置されます。Conic は円グラフ、メーター表示、人工的な color-wheel 背景に最適です。

類似色ではない色相間を遷移するとき — 例えば 青 → 黄 や 赤 → 緑 のような場合です。デフォルトの sRGB 補間は濁ったグレーの中間点を通りますが、OKLCH(CSS Color Module 4 の in oklch)は知覚的に均一な空間で補間するため、中間点が鮮やかに保たれます。色相が近い 2 ストップなら違いはわずかですが、複数ストップや色相幅の広いグラデーションでは OKLCH の方が劇的に優れています。

カラーストップ
CSS
Tailwind v4
JSON
プリセット

本番運用向け CSS グラデーションのために

リニア / ラジアル / コニック、OKLCH なめらか、Tailwind 対応 — そして使うのが楽しくなる小さな工夫を少しだけ。

3 種類のグラデーション

Linear は 0〜360° の角度指定、radial は circle / ellipse + サイズ + 位置、conic は from-angle + 位置に対応。すべて CSS Images Module Level 4 準拠の構文を出力します。

最大 12 のカラーストップ

任意のパーセントにストップを追加し、位置スライダーをドラッグで微調整。スウォッチをクリックして色を選ぶか、HEX を貼り付けます。出力時にストップは自動でソート。× で削除(最低 2 ストップ)。

OKLCH 対応の補間

デフォルトの sRGB と最新の in oklch 補間を切り替え可能。OKLCH は知覚的になめらかな中間点を生成し、色相が大きく変わっても濁ったグレー帯が生じません。CSS Color 4 が未実装のブラウザでもグレースフルにフォールバックします。

CSS、Tailwind v4、JSON 出力

3 つの出力ペインがリアルタイムに更新:生 CSS(background-image: linear-gradient(...))、Tailwind v4 任意値ユーティリティ(bg-[linear-gradient(...)])、Style Dictionary や Figma Tokens にすぐ使える JSON デザイントークン。

30 以上の厳選プリセット

Sunset、Ocean、Aurora、Cyber、Royal、Neon Pink、Iris、Bullseye、Conic Wheel — クリックで読み込んで調整。どれも単なる名前ではなく、本番品質の出発点になります。

ライブプレビュー + 設計段階からのプライバシー

プレビューはネイティブ background-image でレンダリングするため、見たままがスタイルシートの結果と一致します。すべてのピクセルがローカルで動作 — DevTools → Network を開けば、外部リクエストがゼロであることを確認できます。

CSS グラデーションの作り方

白紙の状態から本番運用可能な CSS、Tailwind、JSON へ — 4 ステップ。

  1. 1

    グラデーションの種類を選ぶ

    背景・ヘッダー・ヒーローセクションには Linear。スポットライト・ビネット・グロー系ボタンには Radial。円グラフ・カラーホイール・トレンド感のある人工的な背景には Conic。タブで切り替え可能 — カラーストップは切り替え後も保持されます。

  2. 2

    カラーストップを配置する

    カラースウォッチをクリックしてピッカーを開くか、HEX を直接フィールドに貼り付けます。スライダーをドラッグしてストップ位置を 0〜100% に設定。+ Add stop をクリックすると、最も大きな間隔に新しいストップ(中間色)が挿入されます。最大 12 ストップまで。

  3. 3

    ジオメトリと補間を調整する

    リニアでは角度を設定(0° は上、90° は右)。ラジアルでは shape、size キーワード、中心位置を選択。コニックでは開始角度を設定。多色相のグラデーションで知覚的になめらかな中間点を得るには、Color interpolation を OKLCH に切り替えます。

  4. 4

    出力をコピーする

    3 つのペインがライブ更新:CSS(background-image:...)、Tailwind v4(bg-[...])、JSON(デザイントークン形式)。各ペインのコピーアイコンをクリックするか、Download CSS でプロジェクトにそのままドロップできる gradient.css ファイルとして保存できます。

デザイナーと開発者のために

Figma + 別のグラデーションサイトを開くより、プライバシー重視のブラウザツールが勝る 4 つの代表的なシーン。

マーケティングページのヒーロー背景

ブランドに近いプリセットを選び、ブランドカラー 2 色をストップに入れて、OKLCH 補間に切り替えてクリーンな中間点を作ります。CSS をコピーしてヒーローのスタイルシートに貼り付け。所要時間は 2 分以下。

ブランド対応のボタン + カードグラデーション

3 ストップのブランドグラデーションを一度作り、JSON デザイントークンとしてコピー、Style Dictionary / Figma Tokens に投入。これですべてのプラットフォームのボタンとカードが同じグラデーションを参照できます。1 か所更新すれば全体に反映。

チャート + ダッシュボード用のコニック背景

人工的なコニックグラデーションは、円グラフのビジュアル、進捗ダイアル、「データ読み込み中」のシマー表現に最適。conic を選び、from-angle を設定し、適切なパーセント位置にストップを配置 — 角度 0〜360° とパーセント位置の対応は厳密に一致します。

スライド・SNS 投稿・ヒーロー画像のカスタム背景

グラデーションを作成し、目的に合わせてアスペクト比を設定(スライドは 16:9、IG は 1:1、X ヘッダーは 3:1)してプレビューをスクリーンショット。あるいは CSS を 1 ページの HTML にコピーし、必要なピクセルサイズでブラウザ上でスクリーンショットを撮ります。

100% プライベート — ブラウザ内で動作

あなたの色やグラデーションが端末を離れることはありません。DevTools → Network を開けば、操作中に外部リクエストがゼロであることが確認できます。

  • グラデーション文字列の組み立て、CSS / Tailwind / JSON のシリアライズ、ライブプレビューはすべて、あなたのマシン上の JavaScript として動作します — サーバーサイドレンダリングも、サードパーティ API もありません。
  • プレビューはネイティブの CSS background-image を使用 — レンダリングされたグラデーションは、ユーザーのブラウザでスタイルシートが生成するものと完全に一致します。
  • ログインなし、色の値に対するテレメトリなし。Cookie は同意状態と言語設定の 2 つだけです。

関連ガイド

CSS グラデーション、OKLCH 補間、デザイントークンシステムについて、厳選した記事をご紹介します。

よくあるご質問

linear、radial、conic の違いは?

Linear は指定した角度の直線に沿ってブレンドします(0° = 上方向、90° = 右方向)。Radial は中心点から外側へブレンド — circle または ellipse、farthest-corner などのサイズキーワードに対応。Conic は中心点を軸に回転 — カラーストップは時計の針のように角度に配置されます。Conic は円グラフ、メーター表示、人工的な color-wheel 背景に最適です。

OKLCH 補間はいつ使うべき?

類似色ではない色相間を遷移するとき — 例えば 青 → 黄 や 赤 → 緑 のような場合です。デフォルトの sRGB 補間は濁ったグレーの中間点を通りますが、OKLCH(CSS Color Module 4 の in oklch)は知覚的に均一な空間で補間するため、中間点が鮮やかに保たれます。色相が近い 2 ストップなら違いはわずかですが、複数ストップや色相幅の広いグラデーションでは OKLCH の方が劇的に優れています。

Tailwind v4 出力では何が得られる?

JSX / Blade / HTML にそのまま貼り付けられる任意値ユーティリティです:bg-[linear-gradient(45deg,#ff6b6b_0%,#feca57_50%,#ff9ff3_100%)]。tailwind.config.js を変更する必要はなく、Tailwind 4 のどのプロジェクトでも動作します。名前付きカラートークンを使いたい場合は、代わりに CSS をコピーして手動で変換してください。

古いブラウザでもグラデーションは動く?

リニア・ラジアルグラデーションは 2014 年以降ほぼ全ブラウザで対応しています。コニックグラデーションは 2021 年までに主要なエバーグリーンブラウザに搭載されました。in oklch 補間キーワードは Chrome 111+、Safari 16.2+、Firefox 113+ でサポートされています。古いブラウザに対応したい場合はデフォルトの sRGB 補間を使用してください — 視覚的な差が最も大きいのは色相が大きく変わる複数ストップのグラデーションです。

サーバーに何か送信されますか?

いいえ。グラデーション文字列の生成、CSS / Tailwind / JSON のシリアライズ、ライブプレビューはすべてあなたの端末上の JavaScript で動作します。DevTools → Network を開けば、操作中に外部リクエストが一切発生しないことが確認できます。ブランドカラーや社内トークンを貼り付けても、何もこのノート PC から外には出ません。