CSS グラデーション ジェネレーター

この CSS グラデーション ジェネレーターは、ライブ プレビューとすぐに貼り付けられる背景宣言を使用して、制御するカラー ストップから線形および放射状のグラデーションを構築します。バーに沿ってストップをドラッグし、角度または形状を設定すると、CSS が即座に更新されます。

選択した色と設定に基づいてすべてがブラウザ内で実行されるため、何もアップロードされず、結果をコピーしてオフラインで使用できます。

線形グラデーションは直線に沿って色をブレンドし、角度によってその方向が設定されます。0 度は上を指し、90 度は右を指し、180 度は下を指します。放射状のグラデーションは、円または楕円として中心から外側にブレンドされます。

どちらも標準の CSS 値であり、linear-gradient() および radio-gradient() として記述され、どちらも同じカラー ストップのリストを使用するため、タイプを切り替えるとカラーが維持され、広がり方のみが変わります。

各カラーストップは、0%から100%までの位置に配置される色です。グラデーションは隣接するストップ間でスムーズにブレンドされるため、ストップの位置によって、色のピークがどこで、どのくらいの速さで次のストップにフェードインするかが制御されます。

マルチカラー グラデーションを作成するために必要なだけストップを追加し、ドラッグしてブレンドを微調整するか、バーをクリックして新しいストップを必要な場所にドロップします。勾配に必要な最小限のストップは 2 つです。

生成されたコードをコピーし、セクション、カード、ボタンなどの要素の背景として貼り付けます。最新のブラウザは、ベンダー プレフィックスなしで Linear-gradient と Radial-gradient をサポートしているため、値はそのまま機能します。

グラデーションは単なる値であるため、背景画像が必要な場所で使用したり、フォールバックとして単色の上に重ねたり、一貫した外観を得るために線形バージョンと放射状バージョンで同じストップを再利用したりすることもできます。