線形、放射状、円錐形の CSS グラデーション タイプをサポートします。
角度とカラーストップ位置を自由に調整して、ピクセル完璧なグラデーションを実現します。
パラメーターを調整すると、グラデーションの変化をリアルタイムで確認できます。
生成された CSS コードはプロジェクトに直接貼り付けることができます。
すべての処理はブラウザ内でローカルに行われます。データはどのサーバーにもアップロードされません。
登録も制限もありません。永久に無料で使用できます。
構文、パラメータ、実践例を含む、3 つの CSS グラデーション タイプすべてに関する包括的なガイド。
完全ガイド （英語）柔らかいグラデーションから大胆な色の衝突まで、現在のグラデーション デザイン トレンドを探索し、デザインのインスピレーションを見つけてください。
デザイントレンド （英語）CSS グラデーションがページ レンダリングのパフォーマンスにどのような影響を与えるかを理解し、高パフォーマンスのグラデーション スタイルの作成方法を学びます。
パフォーマンス （英語）Web アクセシビリティと WCAG 準拠を確保しながらグラデーションを使用する方法を学びます。
アクセシビリティ （英語）カラーストップを追加し、その位置を選択し、グラデーションのタイプを選択します。ツールはこれらの設定から CSS を生成します。
プレビューを見ながら色や停止位置、方向を調整します。必要な効果と一致する場合は、生成された CSS をコピーします。