Ultimate CSS Gradient Generator（アルティメットCSSグラデーションジェネレータ）とは

ブラウザ上でグラデーションを簡単にデザインし、そのままCSSコードを自動生成してくれる無料ツールです。デザインツールのような直感的な操作でグラデーションを作成でき、生成されたコードをコピーしてWebサイトに適用するだけで反映できます。

主な機能・特徴

• 作成中のグラデーションリアルタイムプレビュー
• 2色だけでなく3色以上のグラデーションも作成可能
• 線形・放射状グラデーション両対応
• 透明度の設定
• 主要ブラウザ対応のコード生成（-webkit- や -moz- など、古いブラウザ向けのベンダープレフィックス付きコードも一括生成）
• グラデーションバーの下にカラー停止点を配置して色を選ぶなど、Photoshop風のUIデザインツールに慣れている人には直感的

使い方

インストール、ログイン不要ですぐ使えます！

①グラデーションの種類を選択
Linear（線形）、Radial（放射状）を上部メニューから選ぶ

②色を設定する
グラデーションバーの下にある「カラー停止点（ストップ）」をクリックして、開始色・中間色・終了色を設定、複数追加も可能

③透明度を調整する
カラー停止点の上にある「透明度バー」で、不透明度（opacity）を調整。背景と自然に馴染ませたいときに便利

④角度・方向を調整
線形グラデーションの場合、角度を数値で入力（例：90°で上下、180°で左右）
放射状の場合は、形やサイズを調整可能

⑤プレビュー確認＆コードをコピー
設定内容がリアルタイムに反映されるので、理想のグラデーションになるまで調整。
調整後、下部に自動生成されたCSSコードをコピペして使用可能に

活用例

• Webサイトの背景がシンプルな色背景では物足りないとき
• ボタンやリンクの装飾をグラデーションで立体的に見せたいとき
• バナーや見出しのアクセントにし視線を集めやすくしたいとき
• 写真の上に透明度のあるグラデーションを重ねて、文字を読みやすくしたいとき

注意点

※IEや古いバージョンのブラウザに対応する場合は、プレフィックス付きコードも一緒に貼る必要があります

※多すぎる色を使うと見づらくなります。シンプルに2〜3色がおすすめ