CSSグラディエントジェネレーター

ブラウザで線形、放射、コニックのCSSグラデーションを作成します。

グラディエントタイプ角度 (deg)

X位置 (%) Y位置 (%)

カラーストップ

ストップハンドルまたはキーボードの矢印を使用して位置を編集します。各ストップには明示的な色、不透明度、およびパーセンテージが含まれています。

準備完了

グラデーションはこのブラウザに残ります。色や生成されたCSSはConvertrに送信されません。

インポートは、16進数カラーとパーセンテージを使用したlinear-gradient()、radial-gradient()、またはconic-gradient()を受け入れます。宣言、URL、変数、および未知の関数はローカルで拒否されます。

生成されたCSSには、サポートされていないレンダラー向けのグラデーションとアクセス可能なコントロールクロームのためのソリッド背景色フォールバックが含まれています。

グラデーションはアップロードされますか？

いいえ。グラデーションの状態、色、インポートされたCSS、および生成されたCSSはブラウザに残ります。

どのCSSグラディエントタイプがサポートされていますか?

ジェネレーターは、複数の16進数カラーストップを持つlinear-gradient()、radial-gradient()、およびconic-gradient()の出力を作成します。

何をインポートできますか？

インポートは、サポートされている1つのグラデーション関数、16進数カラー、オプションのパーセンテージ、および制限された角度または位置値を使用する、意図的に制限された文法を受け入れます。

線形または放射状のCSSグラデーションを構築し、色の停止点、角度、位置、繰り返しをプレビューします。

入力: グラデーションタイプ、カラーストップ、位置、角度、および繰り返し設定.
出力: ライブプレビューとコピー可能なCSS背景宣言.
実際の制限事項: ブラウザのレンダリングはエンジンによって少し異なり、ツールはコントラストを評価したり、レガシーブラウザでのサポートを保証したりしません。
プライバシーとデータ処理: グラデーションタイプ、カラーストップ、位置、角度、および繰り返し設定は、このブラウザのタブで処理されます。Convertr はそれを受け取ったり保存したりしません。ツールが明示的にローカルダウンロードを提供しない限り、ページを閉じたり再読み込みしたりすると作業状態はクリアされます。

カラーストップの欠落、無効な色、または互換性のない位置により、有効なCSS宣言の構築が妨げられます。

#111827（0%）から#f59e0b（100%）までの90度の線形グラデーションを作成し、その宣言をコピーします。