グラデーションがくすんでしまうのには原因がある、それを自動的に解決して美しいグラデーションを生成できる無料ツール -Gradient Generator

美しいグラデーションを作成するには、補間するカラーにグレーが含まれないようにすることが重要です。グレーが含まれてしまうと、それがデッドゾーンになり、汚いグラデーションになってしまいます。

このグレーのデッドゾーンを回避し、簡単に美しいグラデーションを生成できる無料ツールを紹介します。

Gradient Generator – CSS & SVG Export

ツールを紹介する前に、なぜグラデーションがくすんでしまうのか。
PhotoshopやFigmaなどで幅広い色相のグラデーションを作ろうとすると、グラデーションの中央にグレーのデッドゾーンができてしまうことがよくあります。

左: グレーがあるグラデーション、右: グレーを回避したグラデーション

このグレーのデッドゾーンを避けるには、グラデーションに使用するカラーは大きなカーブ（直線はダメ）を描いて補間する必要があります。

そしてここで紹介するツールを使用すると、8つの異なる色空間で実現できます。そのうち6つは「知覚的に均一」です。

知覚的に均一であることがなぜ重要なのでしょうか。それはグラデーションのバンディング（縞模様）を防ぐためです。つまり、グラデーションの長さに沿って著しく暗かったり明るかったりする縞模様ができるのを防ぎ、スムースに色が移行します。

左: バンディングがあるグラデーション、右: スムースなグラデーション

さらに、ツールではカラーホイールの周りを補間するオプションもあり、同じ2色から異なるグラデーションを生成することもできます。

左: 短い補間、右: 長い補間のグラデーション

グラデーションがグレーに濁ってしまう仕組みについて詳しくは、以前の記事をご覧ください。

グラデーションの中央がグレーに濁ってしまう仕組みをくわしく解説、美しいグラデーションをCSSで実装する方法

では、美しいグラデーションを簡単に生成できるツールを紹介します。
登録など面倒なことは一切不要、無料で利用できます。

Gradient Generator – CSS & SVG Export

グラデーションを作るのは簡単で、「Colors」から使用するカラー（2色or3色）を指定するだけで生成できます。短い補間と長い補間は「Interpolation Direction」で選択できます。表示されているグラデーションは下部からすぐにCSSのコードやSVGファイルで利用できます。

右パネルでグラデーションをカスタマイズして作成できます。グラデーションのタイプは、Liner, Radial, Conicの3種類。Linerは線形グラデーション、Radialは放射グラデーションです。

Radial（放射）のグラデーション

Conicは扇形グラデーションで、最近のグラデーションはこれの人気が高いですね。

Conic（扇形）のグラデーション

カスタマイズは簡単で、角度を変えたり、イージングをあり・なしにしたりできます。

グラデーションのカスタマイズ

一から作成するのが面倒な人は、ギャラリーもあるので、それをベースにしてカスタマイズすることもできます。

グラデーションのギャラリー

グラデーションは、カラースペースを変えることもできます。

カラースペース