CSS グラデーション ジェネレーター
CSS グラデーションを視覚的に構築します。ライブ全幅プレビューとコピー可能なコードを使用して、線形、放射状、または円錐タイプ、角度スライダー、最大 6 つのカラー ストップを使用できます。
結果
Linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%) を手動で書き込み、ページをリロードして確認すると、ループが遅くなります。このジェネレーターはそれを閉じます。線形、放射状、または円錐形を選択し、角度スライダーをドラッグし、ネイティブ カラー ピッカーとパーセント位置で各カラー ストップを設定します。そして、全幅のプレビューが入力ごとに再描画され、完成した背景線はいつでもコピーできる状態になります。
3 つのグラデーション タイプはさまざまなジョブをカバーします。線形グラデーションは方向に沿ってフェードし、ほとんどのヒーロー セクションとボタンを運びます。放射状グラデーションは、グローとビネットのために中心から放射状に広がります。円錐形のグラデーションが中心の周りをスイープし、円グラフとカラーホイールを強化します。いつでもタイプを切り替えることができます。ストップは引き継がれるため、3 つを比較するのに数秒かかります。
最大 6 つのカラーストップにより、マルチバンドデザインの余地が得られ、プリセットページには、空白のキャンバスではなく微調整できる出発点として、暖かい夕日、穏やかな海、ソフトパステルカラーの組み合わせなど、実証済みの組み合わせが付属しています。分業に注意してください。このサイトのカラー パレット ジェネレーターは調和のとれた単色を選択し、カラー フォーマット コンバーターは HEX、RGB、HSL 間の値を変換します。一方、このツールは別の仕事をします。つまり、選択した色を準備ができている CSS グラデーション コードに変換します。
すべてがブラウザ内でローカルに実行されます。アップロード、アカウント、サーバーのラウンドトリップはなく、ジェネレーターはロードされるとオフラインで動作し続けます。