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

あなたのブラウザで線形、ラジアル、コニックCSSグラディエントを作成します。

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

X ポジション (%) ポジション (%)

色停止

停止手袋やキーボードの矢印を使用して位置を編集します. 各停止には明確な色、不透明性、割合が含まれています。

準備完了

あなたのグラディエントはこのブラウザに残ります. 色や生成されたCSSは変換に送信されません。

輸入は、線形グラディント()、放射線グラジント(),またはヘックス色と割合でコニックグラミント()を受け入れます。

生成された CSS には、サポートされていないレンダーのグラディエントとアクセス可能なコントロールクロムのための固体の背景色の落下が含まれています。

グラディエントがアップロードされている?

グラディエント状態、色、輸入されたCSS、および生成されたCssは、あなたのブラウザに残ります。

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

発電機は、線形グラディント()、放射線グラジント()およびコニックグラミント( )の出力を複数のヘックス色の停止で作成します。

何を輸入できるのか。

輸入は、一つのサポートされたグラディント機能、ヘックス色、選択肢の割合、および限られた角度または位置値を使用して意図的に制限された文法を受け入れます。

線形または放射線CSSグラディエントを構築し、色の停止、角度、位置、および繰り返しを予測します。

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

欠けている色の停止、不適切な色、または不一致な位置は、有効なCSS宣言が構築されるのを妨げます。

線形グラディエントを90度から0%に111827から100%にf59e0bに作成し、声明をコピーします。