CSSグラデーションジェネレーター

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

linear-gradient と radial-gradient の CSS を作成し、背景グラデーションをプレビューしながら確認できるツールです。色、角度、形状、カラーストップの位置を調整すると、対応する background コードがその場で更新されます。

ヒーローセクション、カード背景、バナー、ボタン背景などのグラデーションを試したいときに便利です。

カラーストップは最大 8 色まで追加でき、「均等ポジション」で一度きれいに並べてから微調整することもできます。

線形と放射状を切り替えられます。線形では角度、放射状では circle と ellipse を使い分けます。

線形グラデーションで使う設定です。0〜360 度を指定でき、よく使う角度はボタンからすばやく選べます。

各色の位置を 0〜100% で調整できます。複数色を使うときに、どの位置からどの色へ切り替わるかを細かく制御できます。

たとえば、線形グラデーションで角度を 135deg、色を 4 点設定すると、出力は次のようになります。

background: linear-gradient(135deg, #ff6b6b 0%, #feca57 33%, #48dbfb 66%, #1dd1a1 100%);

放射状を選んだ場合は、次のような形式になります。

background: radial-gradient(circle, #ff6b6b 0%, #feca57 33%, #48dbfb 66%, #1dd1a1 100%);

一定方向へ色を流したい背景に向いています。見出し背景やヒーローエリア、ボタンなどで使いやすい形式です。

中心から広がる表現を作りたいときに向いています。スポットライトのような印象や、背景のアクセントを作りたいときに使いやすくなります。