Softonic

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

ステップ 1 / 3
種類
次へ

現代のUI背景では、フラットな単色が使われることはほとんどありません。ヒーローセクション、ボタン、カードなど、ほぼすべてがCSSグラデーションを採用しています。このジェネレーターを使えば、線形または放射状を選び、カラーストップを好きなだけ追加し、角度（線形）または形状（放射状）を設定して、スタイルシートにそのまま貼り付けられるきれいなbackground: linear-gradient(…)値をコピーできます。

CSSグラデーションの作成方法

  1. 1

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

    線形（角度による方向）または放射状（円／楕円）。

  2. 2

    角度または形状を設定

    線形：0～360°。放射状：円または楕円。

  3. 3

    カラーストップを追加

    各ストップは色と位置（0～100％）の組み合わせです。2ストップのグラデーションが基本で、3ストップ以上にするとより滑らかな遷移になります。

  4. 4

    CSSをコピー

    出力は単一の`background`プロパティ値で、任意のCSSファイルに貼り付けられます。

構文チートシート

/* 線形 */
background: linear-gradient(135deg, #6366F1 0%, #EC4899 100%);

/* 放射状（円） */
background: radial-gradient(circle at center, #6366F1 0%, #EC4899 100%);

/* 複数ストップ */
background: linear-gradient(90deg, #fff 0%, #f59e0b 50%, #ef4444 100%);

直感に本当に合う角度

CSSのグラデーション角度は三角法とは異なります：0degは上向き（北）、90degは右向き（東）、180degは下向き、270degは左向きです。

方向 角度
上から下へ 180度
下から上へ 0度
左から右へ 90度
左上から右下へ 135度

濁った中間色を避ける

補色どうしの線形グラデーション（例：青→オレンジ）は、混色が「死んだ」ように見える50％付近のグレー帯を通過します。これを直すには次の方法があります：

  • 関連する色相で中間ストップを追加する（青 → 紫 → 橙）。
  • 知覚的により滑らかなブレンドを得るためにOKLCH補間（linear-gradient(in oklch, ...)）を使う。2024年現在、すべての最新ブラウザでサポートされています。
  • 一方の端点の色相をわずかにずらし、中間色がより暖かい色域に収まるようにする。

パフォーマンスのヒント

グラデーションはGPUで描画され、通常はコストが低めです。ただし、グラデーションをアニメーションさせる場合（background-positionのトリックやSVGのぼかしなど）は描画コストがかさむことがあります。公開前にミドルレンジのスマートフォンでテストしてください。

よくある質問

CSSのグラデーションは上から時計回りに角度を測るのに対し、標準的な数学では右から反時計回りに測ります。CSSの90degは右を指しますが、三角法では0°にあたります。

仕様上は任意の数が許可されています。実際には、4～5つを超えるストップは虹のように見えがちで、適切に選んだ2つか3つのストップのほうがほぼ常にすっきりとして見えます。

はい。任意の値として貼り付けてください：class="bg-[linear-gradient(135deg,#6366F1,#EC4899)]"。再利用可能なグラデーションが必要な場合は、Tailwindの設定ファイルにカスタムユーティリティを定義してください。

通常のエディターでは、プレビューを描画するためにグラデーション設定がサーバーへ送信されます。ガイド付きのフローでは、種類、角度、形状、カラーストップもページURLに表示されます。機密情報は入力しないでください。このツールは再利用用のグラデーションプロジェクトを保存しません。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

JavaScript圧縮ツール

変数名のリネーム、空白の削除、デッドコードの除去、定数畳み込みでJavaScriptを圧縮し、より小さなバンドルを作成します。

キーボードショートカット一覧

macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。

FPS カウンター

requestAnimationFrame でブラウザーの FPS を測定。平滑化、最小・最大フレームレート、警告しきい値、任意のグラフに対応。ローカルで動作し、アップロードも API も不要です。

プレースホルダー画像ジェネレーター

1〜4000 pxの画像に色と文字を設定し、PNGで保存できます。外部URLとHTMLもコピーできます。

このツールは他の言語でも利用できます