グラデーションジェネレーターとは？

CSSグラデーションをビジュアルで作成できるツールです。リニア・ラジアル・コニックの3種類に対応し、カラーストップを無制限に追加できます。角度、位置、色をリアルタイムで調整し、ワンクリックでCSSをコピーできます。

使い方

1. ステップ1 — グラデーションの種類（リニア・ラジアル・コニック）を選び、角度スライダーまたはプリセットボタンで方向や角度を設定します。
2. ステップ2 — グラデーションバーをクリックしてカラーストップを追加します。各ストップの色と位置はドラッグまたは直接入力で調整できます。
3. ステップ3 — グラデーションのプレビューをリアルタイムで確認し、生成されたCSSコードをクリップボードにコピーするか、CSSファイルとしてダウンロードします。

結果

夕焼け風のヒーロー背景を作りたいとします。135°のリニアグラデーションを選び、0%にオレンジ、50%にローズ、100%にパープルを置いて、CSSをスタイルシートに貼り付けるだけです。

関連ツール