グラデーション生成ツール

CSSグラデーションをGUIで簡単作成

色・角度・位置をスライダーで直感的に調整し、美しいCSSグラデーションをリアルタイムでプレビュー。linear-gradient・radial-gradientに対応し、生成されたCSSコードはワンクリックでコピーできます。プリセットからお気に入りの配色を選んですぐに使うことも可能です。すべての処理はブラウザ内で完結します。

使い方

1

グラデーションタイプを選択

「Linear」（直線的なグラデーション）または「Radial」（放射状のグラデーション）から選択します。Webデザインで最もよく使われるのはLinearですが、ボタンのハイライト効果にはRadialも効果的です。

2

角度・形状を調整

Linearモードでは角度スライダーで0°〜360°の方向を設定します。Radialモードでは「Circle」（正円）または「Ellipse」（楕円）を選択できます。角度は数値入力でも直接指定可能です。

3

カラーストップを編集

カラーピッカーで色を選び、位置スライダーで各色の配置（0%〜100%）を調整します。「+ 追加」ボタンで色を増やしたり、✕ボタンで不要な色を削除できます。最低2色は必要です。

4

CSSコードをコピー

プレビューを確認したら「コピー」ボタンでCSSコードをクリップボードにコピーし、そのままスタイルシートに貼り付けて使用します。

CSSグラデーションの基礎知識

CSSグラデーションは、2つ以上の色の間の滑らかな遷移を表現する背景画像の一種です。画像ファイルを使用しないため、ファイルサイズがゼロで読み込み速度に影響しません。

linear-gradient（線形グラデーション）

linear-gradient() は指定した方向に沿って色が変化します。角度の指定は linear-gradient(135deg, #色1, #色2) のように記述します。0°は下から上、90°は左から右、180°は上から下、270°は右から左を意味します。角度を省略すると180°（上から下）がデフォルトになります。

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

radial-gradient() は中心から外側に向かって色が変化します。radial-gradient(circle, #色1, #色2) は正円、radial-gradient(ellipse, #色1, #色2) は楕円形のグラデーションになります。ボタンのホバーエフェクトや背景のアクセントに多く使われます。

カラーストップとは

カラーストップは各色がグラデーション上のどの位置に配置されるかを示すパラメータです。例えば linear-gradient(90deg, #ff0000 0%, #0000ff 100%) は左端が赤、右端が青のグラデーションになります。中間に複数のカラーストップを追加すると、より複雑な多色グラデーションを作れます。色の位置を近づけると境界がくっきりし、離すと滑らかに遷移します。

Webデザインでの活用シーン

グラデーションはヘッダー背景、ボタン、テキストのアクセント、オーバーレイなど幅広い場面で使われます。近年のWebデザインのトレンドでは、微妙な色の変化で奥行き感を出すソフトグラデーションや、鮮やかな色を組み合わせたビビッドグラデーションが人気です。本ツールはこうしたグラデーションをGUIで直感的に作成し、すぐにCSSコードとして利用できるため、デザインの試行錯誤を大幅に効率化します。

よくある質問

グラデーションの色は何色まで追加できますか？

本ツールでは最大10色まで追加できます。CSSの仕様上は色の数に制限はありませんが、実用的には2〜5色程度が美しく仕上がります。色が多すぎると表示が雑然としてしまうことがあるため、少ない色数から始めて徐々に調整するのがおすすめです。

生成したCSSコードはどのブラウザで使えますか？

CSS gradient はすべてのモダンブラウザ（Chrome、Firefox、Safari、Edge）でサポートされています。IE11以下では一部制限がありますが、現在のブラウザシェアでは問題なく利用できます。

プリセットを自分用にカスタマイズできますか？

プリセットをクリックすると自動的にカラーストップが反映されます。そこからカラーや角度を自由に変更してカスタマイズできます。調整後のCSSコードをそのままコピーしてご利用ください。

テキストにグラデーションを適用するには？

テキストにグラデーションを適用するには、background: linear-gradient(...) に加えて -webkit-background-clip: text と color: transparent を指定します。本ツールで生成したグラデーションコードをこの手法と組み合わせると、見出しやタイトルに美しいグラデーション効果を付けられます。

グラデーションの方向を「to right」のようなキーワードで指定できますか？

本ツールでは角度（deg）形式でCSSコードを出力します。「to right」は90deg、「to bottom」は180deg、「to left」は270deg、「to top」は0degに相当します。角度指定のほうが細かい調整が可能で、実用上も広く使われています。

データについて

このツールは時効性のないデータのみを使用しています。計算式や変換係数は普遍的な値に基づいており、定期的な更新は不要です。

入力データはブラウザ内のみで処理されます。サーバーへの送信は一切ありません。