グラデーションジェネレーターとは？
CSSグラデーションをビジュアルで作成できるツールです。リニア・ラジアル・コニックの3種類に対応し、カラーストップを無制限に追加できます。角度や位置、色をリアルタイムで調整して、そのまま使えるCSSコードをワンクリックでコピーできます。
使い方
- ステップ1 — グラデーションの種類（リニア・ラジアル・コニック）を選び、角度スライダーまたはプリセットボタンで方向や角度を設定します。
- ステップ2 — グラデーションバーをクリックしてカラーストップを追加します。各ストップの色と位置はドラッグまたは直接入力で調整できます。
- ステップ3 — グラデーションのプレビューをリアルタイムで確認し、生成されたCSSコードをクリップボードにコピーするか、CSSファイルとしてダウンロードします。
結果
あるWebデザイナーが夕焼けをイメージしたヒーロー背景を作りたいと考えました。135°のリニアグラデーションを選択し、0%にオレンジ、50%にローズ、100%にパープルのカラーストップを配置して、そのままスタイルシートにCSSを貼り付けました。