CSSグラデーション ジェネレーター
見ながらグラデーションを作り、最新のすべてのブラウザで使えるCSSをコピーしましょう。
このデバイス内で封印済み
ブラウザ内で動作します。何もアップロードされません。
封印済み
プレビュー
カラーストップ
ストップをドラッグするか、選択して矢印キーで動かします。バーをクリックするとストップを追加できます。
設定
OKLCHとOKLabを使うと、グラデーションの中間がくすんだグレーになるのを防げます。古いブラウザ向けに標準の記述も含まれます。
CSSコード
使い方
-
種類を選ぶ
線形・放射・円錐のグラデーションを選ぶか、プリセットから始めて、角度や中心を設定します。
-
色を編集
バー上のカラーストップをドラッグし、バーをクリックしてストップを追加し、各ストップの色と位置を変更します。
-
CSSをコピー
生成されたコードをコピーし、スタイルシートに背景として貼り付けます。
よくある質問
線形・放射・円錐グラデーションの違いは？
線形グラデーションは、選んだ角度の直線に沿って色が変わります。放射グラデーションは、中心点から円や楕円状に広がります。円錐グラデーションは、時計の針のように中心点の周りを回るため、色相環や円グラフに便利です。
生成されたCSSはすべてのブラウザで使えますか？
線形・放射・円錐グラデーションは、現在のすべてのブラウザで使えます。OKLCHやOKLabの混ぜ方を選んだ場合は、コードの先頭に標準の記述も入るので、古いブラウザでもグラデーションが表示されます。
グラデーションの中間がグレーに見えるのはなぜですか？
大きく異なる2色を標準のsRGB色空間で混ぜると、途中で濁ったグレーになりがちです。色の混ぜ方をOKLCHかOKLabに切り替えてください。目の感じ方に沿って色が混ざるため、中間も鮮やかなままです。
半透明の色を使えますか？
はい。ストップの色の欄に、rgb(52 66 217 / 0.4) や #3442d966 のような透明度付きの色を入力してください。画像の上に重ねるオーバーレイに最適です。
カラーストップはいくつ追加できますか？
必要なだけ追加できます。各ストップはマウス、タッチ、矢印キーで動かせ、2つ以上残っていれば削除できます。