🌈

CSS グラデーション 生成

CSS の線形グラデーションと放射状グラデーションを作成・プレビューします。すぐに使える CSS コードをコピーできます。

デザインツール ローカルで実行 データは送信されません
CSSグラデーション リニア ラジアル デザイン
グラデーションの種類
方向
●
カラーストップ
CSS出力

CSS グラデーション 生成とは？

CSSのリニアグラデーションとラジアルグラデーションを作成・プレビューできます。カラーストップを追加し、方向を選択して、すぐに使えるCSSコードをコピーできます。

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

  1. 線形グラデーションか放射状グラデーションかを選択します。
  2. ブレンドが適切に見えるまで、カラーストップを追加または調整します。
  3. ライブプレビューで角度、位置、広がりの値を微調整します。
  4. プロジェクトで使用する準備ができたら、生成されたCSSをコピーします。

関連ツール

🎨
カラーパレット 生成
補色、類似色、トライアドのカラーパレットを生成します
 🎨
カラーピッカー ツール
HEX、RGB、HSL、CMYK 間で色を変換します
 ⚖️
WCAG コントラスト チェック
アクセシビリティのために WCAG AA および AAA の色コントラスト比を確認します
CSSグラデーションを理解する ▾
例
入力 リニア、90°、ストップ: #6366F1 → #8B5CF6
出力 background: linear-gradient(90deg, #6366F1, #8B5CF6);
一般的な使用例
  • マーケティングページ用のヒーロー背景グラデーションを作成
  • CSSファイルを編集する前に、角度とストップの調整をテストする
  • 洗練されたボタンやカードの背景を生成
  • 手動変換なしで、正確なグラデーションCSSを開発者と共有
よくある質問
-webkit-linear-gradient のようなベンダープレフィックスは必要ですか？

いいえ — 最新のすべてのブラウザ（Chrome、Firefox、Safari、Edge）はプレフィックスなしのCSSグラデーションをサポートしています。ベンダープレフィックスが必要なのは、ごく古いブラウザ（IE 9以下）のみです。

透明なカラーストップは使用できますか？

はい — アルファ値を0にした rgba() または hsla() カラーを使用すると、透明へのフェードを作成できます。例: rgba(99, 102, 241, 0) はインディゴを不可視にフェードさせます。

このグラデーションをテキストに使用できますか？

はい — グラデーションの値をコピーし、CSSプロパティで使用します: background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent;

カラーストップの最大数はいくつですか？

このツールは最大6つのカラーストップをサポートしています。CSS自体に厳密な制限はありません — ブラウザは数十のストップを持つグラデーションをサポートしますが、パフォーマンスは異なる場合があります。