🌈 1つのツールキットで
あらゆるデザイン作業を

グラデーション生成

リアルタイムのキャンバス プレビューを使用して、美しい線形および放射状のグラデーションをデザインします。 CSS コードを即座にコピーします。

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

🌈 グラデーション生成

グラディエントジェネレーターガイド

グラデーションは、2 つ以上の色間の滑らかな移行です。グラデーションは、Web デザイン、UI 要素、イラストに奥行き、立体感、視覚的な面白さを加えます。

2 つの色を選択し、グラデーションの角度を選択すると、その結果が即座にキャンバス上に表示されます。プロジェクトで使用する CSS コードをコピーします。

Pro Tips

Frequently Asked Questions

Q: 線形グラデーションと放射状グラデーションの違いは何ですか?
線形グラデーションと放射状グラデーションの違いは何ですか?線形グラデーションは直線に沿って遷移しますが、放射状グラデーションは中心点から放射状に広がります。
Q: CSSでグラデーションを使用できますか?
CSSでグラデーションを使用できますか?はい、background-image プロパティを線形グラデーション関数または放射状グラデーション関数とともに使用します。
Q: 透明なグラデーションを作成できますか?
透明なグラデーションを作成できますか?はい、不透明度スライダーを使用するか、コピーした CSS を手動で編集して rgba() または hsla() カラー値を使用します。透明度のあるグラデーションは、オーバーレイやガラス効果に最適です。
Q: グラデーションをレスポンシブにするにはどうすればよいですか?
グラデーションをレスポンシブにするにはどうすればよいですか?生成された CSS は、任意のコンテナ サイズで機能します。全画面グラデーションの場合は、ボディまたはラッパー要素にグラデーションを適用します。最良の結果を得るには、background-size: cover を使用してください。
Q: 線形グラデーションと放射状グラデーションの違いは何ですか?
線形グラデーションと放射状グラデーションの違いは何ですか?線形グラデーションは直線に沿って遷移するため、ヘッダーやバナーに最適です。放射状グラデーションは中心点から放射状に広がり、スポットライト効果や円形要素に最適です。