OneKitTools logoOneKitTools
画像に戻る

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

15のプリセットでCSSグラデーションを作成し、CSS、Tailwind、SCSS、PNGにエクスポート

グラデーションジェネレーター について

15のプリセット、ライブプレビュー付きでカスタムCSSグラデーションを作成し、CSS、Tailwind、SCSS、PNGにエクスポートします。

グラデーションジェネレーター の使い方

  1. 1グラデーションタイプを選択：線形、放射状、または円錐。
  2. 2色を追加・編集 — ストップをドラッグして位置を調整します。
  3. 3角度（線形）または形状（放射状：円/楕円）を設定します。
  4. 4Starter以上：15のプロフェッショナルプリセットから選ぶか、「ランダム」をクリックします。
  5. 5CSSコードをコピーするか、Tailwind、SCSS、PNGにエクスポートします。

ヒント

  • 円錐モードはカラーホイール効果やダイヤルインジケーターに最適です。
  • グラデーションをPNGとしてダウンロードして壁紙、バナー、プレースホルダーとして使用できます。
  • テキストプレビューはbackground-clip: textエフェクトとしてのグラデーションの見え方を示します。

関連ツール

OneKitTools チーム更新日 2.21.4