Tool overview
CSS グラデーションジェネレータとは？
CSS グラデーションジェネレータは、OKLCH・円錐・Tailwind 対応のマルチストップ CSS グラデーションを設計するための開発者向けツールです。
なぜCSS グラデーションジェネレータを使うのか？
OKLCH・円錐・Tailwind 対応のマルチストップ CSS グラデーションを設計する際の可読性と作業速度を向上させ、データをサーバーに送信しません。
主な機能
クライアントサイドのプライバシー、即座の結果、ワンクリックコピー。OKLCH・円錐・Tailwind 対応のマルチストップ CSS グラデーションを設計する
使い方
上のツールで正確な結果を得るための手順です。
- linear / radial / conic を選び、ライブプレビュー上でカラーストップを追加します。
- 角度や中心位置を調整し、より滑らかなブレンドのために OKLCH を切り替え、必要なら sRGB と比較します。
- CSS、Tailwind 任意クラス、CSS カスタムプロパティをコピーするか、後で復元できる共有リンクをコピーします。
- 既存の background: linear-gradient(...) を「CSS をインポート」に貼り付けてストップを再現します。
- 関連ツールからカラーコンバータまたは WCAG コントラストを開き、ストップ色を検証します。
CSS グラデーションジェネレータ案内：linear-gradient・OKLCH・conic・Tailwind
この無料ジェネレータで CSS Color 4 OKLCH 補間、@supports フォールバック、Tailwind クラス、共有 URL 付きのマルチストップ linear / radial / conic CSS を組み立てます。
線形グラデーション
角度（度）と無制限のカラーストップ、位置、不透明度。任意で in oklch 補間。
放射状グラデーション
パーセント中心からの円または楕円とマルチストップのカラーランプ。
コニックグラデーション
中心周りを from 角度で色が旋回。円グラフや虹効果向け。
マルチストップの色と不透明度
ストップの追加・削除・反転・ランダム化。貼り付けた background CSS をインポート。
OKLCH 色補間
既定は知覚的ブレンド。古いブラウザ向けに @supports の sRGB フォールバック。
CSS、Tailwind、CSS 変数
background CSS、Tailwind 任意クラス、または :root カスタムプロパティをエクスポート。
共有 URL と CSS インポート
?g= / #g= で設定を同期し、貼り付けたグラデーション CSS から復元。
アクセシビリティ連携
選択したストップを WCAG コントラストとカラーコンバータへディープリンク。
CSS グラデーションテキスト
グラデーションを書き出し、background-clip: text と透明な文字色で適用（Safari は -webkit-background-clip: text）。
CSS グラデーション枠線
書き出したグラデーションをパディング付きラッパーと内側の単色背景に使うか、同じグラデーションで border-image を適用。
CSS グラデーションのアニメーション
ここで静的 CSS を書き出し、スタイルシートで background-position やカスタムプロパティをアニメーション。
CSS gradient border
Common patterns: (1) a padded wrapper with the exported gradient background and an inner element with a solid fill, or (2) `border-image` using the same gradient. Prefer the wrapper approach when you need rounded corners and consistent cross-browser results.
Animating CSS gradients
This generator exports static gradient CSS. Animate in your stylesheet by shifting `background-position` on a larger gradient, or by transitioning CSS custom properties that feed into `linear-gradient()` / `conic-gradient()`.
よくある質問
一般的なトラブルとデータプライバシーに関する回答です。
公式ドキュメントと参照
このユーティリティの公式仕様とプラットフォーム文書です。