グラデーションの構文を手書きするのは面倒です。角度、ストップの順序、パーセント位置が絡み合い、ちょっとしたミスでbackground全体が崩れます。このジェネレーターはプレビューとコードを常に一致させ、見たままのCSSがそのままコピーできます。処理はすべてクライアント側で完結するため、作成したデザインがどこかにアップロードされることはありません。
無料CSSグラデーションジェネレーター
すべてブラウザー内で動作します。アップロードも登録も不要です。
種類
カラーストップ
CSSコード
CSSグラデーションジェネレーターとは?
CSSグラデーションジェネレーターは、linear-gradient()、radial-gradient()、conic-gradient()のコードを視覚的に組み立てるツールです。色を選び、ストップの位置をドラッグし、角度を設定するだけで、そのまま貼り付けられるCSSが手に入ります。プレビューはブラウザの表示結果と完全に一致し、処理はすべてブラウザ内で完結します。
使い方
- 1グラデーションの種類を選ぶ. 線形・放射状・円錐形から選びます。線形には角度スライダー、放射状には形状(円または楕円)と位置、円錐形には開始角度と位置があります。
- 2カラーストップを設定する. スウォッチをクリックして色を選び、スライダーをドラッグしてグラデーション上のストップ位置を動かします。最大8個まで追加、最少2個まで削除できます。
- 3方向を調整する. 角度スライダー(0〜360度)をドラッグするか、位置のキーワードを選びます。変更するたびにプレビューが即座に更新されます。
- 4CSSをコピーする. 「コピー」を押すと、単色のフォールバックを含むbackgroundの宣言が取得できるので、そのままスタイルシートに貼り付けます。
こんな方に
- フロントエンド開発者: ヒーローセクションやカード、ボタンの背景に使う
linear-gradient()の記述を、構文を覚えずに正確に取得できます。 - WebやUIデザイナー: モックアップに合わせて視覚的にグラデーションを再現し、生成したCSSをそのまま開発チームに渡せます。
- メールやランディングページの制作者: 古いメールクライアントでも表示が崩れないよう、単色のフォールバックが自動で含まれます。
- CSSを学ぶ学生: 角度やカラーストップ、グラデーションの種類が結果にどう反映されるかをリアルタイムで確認できます。
よくある質問
このCSSグラデーションジェネレーターは無料ですか?
はい、完全無料です。登録不要、透かしなし、制限もありません。好きなだけグラデーションを作成し、CSSをそのままプロジェクトにコピーできます。
サーバーに何かアップロードされますか?
いいえ。グラデーションの作成とプレビューはすべてブラウザ内でJavaScriptのみで行われます。色やコード、利用データが送信されることはありません。
線形・放射状・円錐形グラデーションの違いは?
線形グラデーションは指定した角度の直線に沿って色を混ぜます。放射状グラデーションは中心点から円または楕円状に広がります。円錐形グラデーションはカラーホイールや円グラフのように中心点の周りを色が回転します。
CSSグラデーションのカラーストップはどう機能しますか?
各ストップは色とグラデーション線上の0%〜100%の位置を組み合わせたものです。ブラウザは隣り合うストップの間を滑らかに混ぜます。同じ位置に2つのストップを置くと、滑らかな変化ではなくくっきりした境界になり、縞模様や円グラフの表現に使えます。
これらのグラデーションに対応しているブラウザは?
Chrome、Firefox、Safari、Edgeなどすべての主要ブラウザがプレフィックスなしのlinear-gradient()とradial-gradient()に対応しており、conic-gradient()も2020年以降どこでも対応済みです。コピーしたコードには、古い環境向けの単色フォールバックも含まれます。
生成したグラデーションをテキストの色に使えますか?
直接は使えません。グラデーションは色ではなく画像です。テキスト要素にbackground-imageとしてグラデーションを適用し、background-clip: textとcolor: transparentを追加することで、文字の形にグラデーションを表示できます。
グラデーションに縞模様が出るのはなぜですか?
離れた2つのストップが近い色相の広い範囲で混ざると、8ビットの色階調が段になって縞模様(バンディング)として見えてしまいます。中間にカラーストップを追加する、混ざる距離を短くする、色相だけでなく明度も異なる色を選ぶことで軽減できます。