「CSSでグラデーションを作りたいけど、コードを手書きするのはちょっと面倒だな…」。そう感じたことのある方は、きっと少なくないはずです。
この記事では、Photoshop風の画面で直感的にCSSグラデーションを作れる老舗ツール「Ultimate CSS Gradient Generator」を、2026年のいまの目線で改めて紹介します。
Web制作を長くやってきましたが、CSSでグラデーションが当たり前に書けるようになった頃は、それはもう感動したものです。それまで画像で作っていたものが、文字だけで表現できるようになったのですから。
とはいえ当時は、ブラウザごとに違う書き方を何行も並べないと、思ったとおりに表示されないという面倒な時代でもありました。-moz- だの -webkit- だの、おまじないのようなコードを延々と書いていた記憶があります。今思えば、なかなか大変な作業でしたね。
そんな悩みをまるっと解決してくれるのが、ColorZillaが提供する「Ultimate CSS Gradient Generator」です。色を選んでスライダーをいじるだけで、あとは貼り付けるだけのCSSがすっと出来上がります。コードの知識がまったくなくても問題ありませんし、登録も支払いもいりません。
この記事を最初に書いたのは2011年のこと。あれから15年がたち、CSSグラデーションを取り巻く事情もずいぶん変わりました。当時はブラウザ対応のために必須だった長いコードが、いまではほとんど不要になっているのです。
そこで今回は、このツールが今も元気に使えることをきちんと確認したうえで、最新のCSSグラデーション事情もあわせてお伝えします。初心者の方が「とりあえずこれを読んでおけば大丈夫」と思える、ちょっとした道しるべになる内容を目指しました。
Ultimate CSS Gradient Generatorとは
「Ultimate CSS Gradient Generator」は、ブラウザ拡張機能でおなじみのColorZillaが提供している、オンラインのCSSグラデーション作成ツールです。インストールは不要で、サイトを開けばすぐに使えます。
最大の特徴は、Photoshopのグラデーションエディターにそっくりな画面で、感覚的に色を作っていけることです。
下のバーをクリックして色を足したり、つまみをドラッグして位置を動かしたり。慣れた操作でサクサク作れるので、「コードはよく分からない」という方でも迷いません。
うれしいポイント
個人的にありがたいと感じるのは、135種類以上のプリセットが最初から用意されている点です。配色のセンスに自信がなくても、好みの一つを選んで微調整するだけで、それっぽいグラデーションが完成します。
色の指定はhexはもちろん、rgb・rgba・hsl・hslaにも対応しています。透明度を使ったフェード表現も作れるので、ふんわり消えていくような背景もお手のものです。
さらに、手元のグラデーション画像を読み込んでCSSに変換したり、既存のCSSコードを貼り付けて編集したりもできます。作ったグラデーションは固有のリンクで共有できるので、チーム作業のときにも便利ですね。
関連記事：カラーコードを取得したい時はGoogle検索でカラーピッカー機能を使おう
公式の案内によると、出力されるCSSはIE9以降に対応した形になっており、Sass/SCSS形式での書き出しにも対応しているとのことです。至れり尽くせりで、15年前の私が見たら泣いて喜んだことでしょう。
参考： Ultimate CSS Gradient Generator 公式サイト
使い方はとてもシンプル
使い方で迷うことはほとんどありません。ざっくり次の流れだけ覚えておけば十分です。
まずはプリセットから近い雰囲気のものを選びます。次に、バー上のつまみをクリックして色や位置を調整します。プレビューを見ながら、縦・横・斜め・円形といった向きを切り替えていきます。
満足のいく仕上がりになったら、画面に表示されたCSSコードをコピーして、自分のスタイルシートに貼り付けるだけ。これで完成です。
つまり「選ぶ・いじる・コピーする」の3ステップで、手書きゼロのままグラデーションが手に入るわけです。
色の組み合わせに正解はありませんが、最初のうちは2色のシンプルなグラデーションから始めると失敗しにくいですよ。欲張って色を増やしすぎると、にじんだ印象になりがちなので注意してください。
2026年のいま、コードはどれだけシンプルになったのか
ここからが、この記事で一番お伝えしたかった話です。15年前と今とでは、必要なCSSの量がまるで違います。
まずは当時のコードを見てください。1つのグラデーションのために、これだけの行を書いていました。
background: #b3dced; /* 古いブラウザ用 */
background: -moz-linear-gradient(top, #b3dced 0%, #29b8e5 50%, #bce0ee 100%); /* Firefox */
background: -webkit-linear-gradient(top, #b3dced 0%, #29b8e5 50%, #bce0ee 100%); /* Chrome,Safari */
background: -o-linear-gradient(top, #b3dced 0%, #29b8e5 50%, #bce0ee 100%); /* Opera */
background: -ms-linear-gradient(top, #b3dced 0%, #29b8e5 50%, #bce0ee 100%); /* IE10 */
background: linear-gradient(to bottom, #b3dced 0%, #29b8e5 50%, #bce0ee 100%); /* 標準 */ブラウザごとに -moz- や -webkit- といった「ベンダープレフィックス」を付けて、ほぼ同じ内容を何度も繰り返していたわけです。書くのも管理するのも、正直しんどい作業でした。
ところが今は、最後の1行だけで十分です。
background: linear-gradient(to bottom, #b3dced 0%, #29b8e5 50%, #bce0ee 100%);MDNによると、linear-gradient は2015年7月以降、主要ブラウザで安定して使える「Baseline（広く利用可能）」の機能になっており、ベンダープレフィックスは今日では不要です。
つまり、あの長ったらしい呪文のようなコードは、もう書かなくていいということです。時代は変わりました。
覚えておきたい基本の書き方
linear-gradient の構文はとてもシンプルで、向きと色を並べるだけです。
向きは to bottom（下方向）や to right（右方向）といったキーワードのほか、45deg のように角度でも指定できます。向きを省略すると、上から下へのグラデーションになります。
円形にしたいときは radial-gradient() を使います。書き方の考え方は linear とほぼ同じなので、片方を覚えればもう片方もすぐに使えます。
最近のブラウザでは、円すい状の conic-gradient() や、より自然な色の混ざり方を指定できる新しい記法も使えるようになっています。ただ、初心者のうちは linear と radial の2つを押さえておけば、たいていの場面で困りません。
参考： MDN Web Docs: linear-gradient()
まとめ：いまでも頼れる、グラデーションの相棒
結論として、「Ultimate CSS Gradient Generator」は2026年の今も現役で使える、頼りになるグラデーション作成ツールです。
Photoshopそっくりの画面で感覚的に作れて、豊富なプリセットも用意されている。コードを書くのが苦手な初心者の方にこそ、まず一度触ってみてほしいツールです。
この記事を最初に書いた2011年から15年。改めて公式サイトを開いてみたら、ツールは今も元気に動いていて、なんだか旧友に再会したような気持ちになりました。長く使われ続けるツールには、やはりそれだけの理由があるものですね。
一方で、CSSそのものはずいぶん身軽になりました。かつてブラウザ対応のために必要だった長いコードは姿を消し、今では linear-gradient() の1行で済んでしまいます。MDNでも「広く利用可能」とされている機能です。
とはいえ、ツールの便利さが消えてしまうわけではありません。手書きの手間が減った今でも、色を視覚的に選べて、配色のヒントになるプリセットがそろっているツールの価値は、むしろ高まっているとさえ感じます。コードが短くなったぶん、配色そのものに集中できるようになったとも言えるでしょう。
使い方を改めて整理すると、こうなります。プリセットから雰囲気を選び、つまみで色と位置を整え、出てきたコードをコピーして貼り付ける。たったこれだけです。難しい知識は何ひとつ要りません。
はじめは2色のシンプルなグラデーションから。慣れてきたら色を足したり、向きを変えたり、円形に挑戦したり。少しずつ遊びの幅を広げていくのがおすすめです。
長年Web制作をしてきた私としては、こうした「面倒を肩代わりしてくれる道具」をうまく使うことこそ、初心者が楽しく続けるコツだと思っています。難しく考えず、まずは気軽に色を触ってみてくださいね。それでは、よいWeb制作を。
