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

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

• 01

  線形、放射状、円錐

  線形はいつもの背景グラデーション。放射状はハイライトとビネットに最適。円錐は円グラフ、色輪、回転背景に最適です。

• 02

  最大 6 つの色止め

  色止めを追加および削除し、スライダーで各位置を設定し、システムカラーピッカーまたは 16 進値で色を選択します。色止めは位置に応じて自動的に再ソートされます。

• 03

  コピー可能な CSS 宣言

  出力は完全な background: ... 宣言で、スタイルシート、スタイル付きコンポーネント、または Tailwind 任意値クラスに直接貼り付けられます。

CSS グラデーション ジェネレータのよくある質問

線形、放射状、円錐の違いは？

線形グラデーションは指定された角度で直線を走ります。放射状は中心から外側に広がります。円錐は時針のように点を中心に回転します。それぞれが異なる視覚効果に適しています。

何個の色止めを使用する必要がありますか？

2 つの色止めは古典的な 2 色グラデーション。3 つまたは 4 つはリアルな遷移（日没、オーロラ）を作成できます。6 つ以上はノイズが多く見えます——これが理由で、このジェネレータは 6 つに制限されています。

メール テンプレートの背景に使用できますか？

ほとんどのメール クライアントはモダン CSS グラデーションを確実にサポートしていません——これをメール テンプレートにコピーする場合は、背景グラデーションに加えて単色フォールバックを提供します。

出力はピクセル精密ですか？

はい——プレビューはブラウザのネイティブグラデーション エンジンでレンダリングされるため、表示内容が CSS が生成する内容です。