メインコンテンツへスキップ
無料ツール集

CSSグラデーション生成ツール

無料オンラインCSSグラデーション生成ツール。直感的なUIで美しいグラデーションを作成、CSSコードを一発コピー。線形・円形グラデーション対応、複数色対応。Web制作、デザイン、背景作成に最適。

#667eea
%
#764ba2
%
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);

使い方

  1. 1.グラデーションタイプ（線形または円形）を選択します
  2. 2.線形の場合は角度を調整、カラーピッカーで色を選択します
  3. 3.「色を追加」ボタンで色を追加、位置（%）を調整します
  4. 4.プリセットから好みのグラデーションを選択することもできます
  5. 5.「CSSコピー」ボタンでコードをコピーし、プロジェクトに貼り付けます
Cookieとデータ利用について

本サイトでは広告配信と利用状況分析のためCookie等を使用します。｢同意する｣を押すと広告・解析のデータ利用を許可します。設定はいつでもブラウザのCookieを削除して変更できます。

CSSグラデーション生成ツール | Kostenlose Tools