グラデーションセットの作成
基本タイプを選択し、最大4つのカラーストップを定義します。空のストップは安全に無視されます。
注目のエクスポート
選択した主なタイプを反映した結果です。下のギャラリーでは、同じストップデータを使用して別の方向やスタイルを提案します。
6
ギャラリーのバリエーション
整数 %
位置の丸め
レンダリングはブラウザによって若干異なる場合があり、大きな円錐状グラデーションは一部のディスプレイでバンディング（縞模様）が発生することがあります。エクスポートされるストップ位置は0〜100の範囲に制限され、予測可能なCSSのために整数に丸められます。
グラデーションギャラリー
生成されたバリエーションを並べて比較し、レイアウトに最適なバージョンをコピーしてください。手動でストップを再設定する必要はありません。
仕組みについて
このジェネレーターは、入力されたカラーストップをサニタイズし、基本のグラデーション文字列を構築します。そこから、関連する角度、放射状の配置、円錐状の回転を含むバリエーションを作成し、パレットを変更することなく現実的な代替案を確認できるようにします。
有効な16進数カラーのみが使用されます。オプションの空のカラーはスキップされます。ストップ位置は、データがすでに有効な場合にのみソートされます。位置が逆転している場合は、入力を勝手に変更するのではなくエラーとしてフラグを立てます。これにより、エクスポートされるCSSと入力内容の一貫性が保たれます。
コピー機能はまずClipboard APIを試み、必要に応じて一時的なテキストエリアにフォールバックします。コピーが利用できない場合でも、CSSは選択可能なコードブロックに表示されるため、確実に出力可能です。