CSSのグラデーションを視覚的に作成できます。線形、放射状、円錐状のグラデーションについて、カラーストップ、不透明度、位置を設定し、すぐに使えるCSSコードをコピーできます。
CSSのグラデーションは、ラスターファイルではなく、数学的な記述に基づいてブラウザによって生成される画像です。主な3つのタイプは、線形（直線に沿った色の変化）、放射状（中心点から外側へ向かう変化）、および円錐状（中心点を中心に角度ごとに変化する）です。 各タイプでは、任意の数のカラーストップを設定でき、各カラーストップにはオプションで不透明度を指定したり、位置を明示的に指定したり、自動配置にしたりすることができます。
グラデーションの種類を選択し、カラーピッカーと不透明度コントロールを使ってカラーストップを設定します。線形グラデーションの場合は、角度を設定するか、方向のショートカットを使用します。 放射状グラデーションや円錐グラデーションの場合は、中心の位置とサイズ、または開始角度を設定します。プレビューはリアルタイムで更新されます。グラデーションが希望どおりになったら、生成された CSS プロパティをコピーして、スタイルシートに直接貼り付けてください。また、既存のグラデーション文字列を「インポート」パネルに貼り付けて編集することもできます。
CSSのグラデーションを使用すれば、背景や装飾要素に画像ファイルを使用する必要がなくなり、ページの容量を削減できるほか、どの解像度でも鮮明な色を維持できます。不透明度の調整機能を活用すれば、ガラスモルフィズム効果のための半透明なカラーストップを作成したり、単色を透明へとフェードさせたりすることができます。円錐グラデーションは、JavaScriptを使用せずに円グラフ風の進行状況インジケーターを作成するのに役立ちます。