CSS 勾配発生器: 線形、半径、円錐 (および角度トラップ)

私は1 回グラデーションに午後の大部分を失いました 複雑なものではありません - WP Adminifyマーケティングページのヒーローの背景、ブランドブルーがブランドオレンジにフェードインし、斜め。 と書きました linear-gradient(45deg, #4466EE, #E99537) そして、それは間違った方向に進みました。 それでやってみた -45deg。 また、間違っています。 そしたら 135deg、それは正しかったのですが、その理由を理解せずに先に進みました。これは、最悪の結果になる可能性があります。これは、再び間違いを犯すことが保証されるため、最悪の結果です。

その理由は、CSS 勾配角度は、数学の授業で学んだ角度ではないからです。 0deg 点数 アップ、そして角度が大きくなる 時計回り.三角法 - とSVG, およびキャンバスにおいて - 直角と角度が反時計回りに0 点が増加する.2 つの異なる規則,1 つは同一に見える deg ユニット、間違ったものを選んでもエラー メッセージは表示されません。 はっきりと書き留められています CSS 画像モジュール レベル 3、そして私はそれを読んだことがありませんでした。

これは、1 つの逸話でビジュアル ジェネレーターの場合です。 ザ・ グラデーションジェネ Toolz.dev では、ライブ プレビュー、ドラッグ可能なカラー ストップ、線形、放射状、円錐の勾配のコピー可能な CSS が提供されます。そのため、角度の質問には午後の費用がかかるのではなく、それ自体が答えられます。

tl;dr: CSSでは、 0deg を指す トップ そして角度が走る 時計回り、そうです to right 等しい 90deg そして左上→右下の対角線は 135deg、ない 45deg。 使い グラデーションジェネ 推測するのではなく、それを見るために、そして カラーピッカー 途中で泥だらけにならないストップを選ぶ。 グラデーションは <image> 値 - どこでも使用できます url()、グラデーションを使用できます。 すべてのクライアント側、サインアップはありません。

技術的には、CSS グラデーションとは何ですか?

グラデーションは色ではありません。 それは イメージ。 その 1 つの事実が、ほとんどの構文を説明しています。

につき CSS 画像レベル 3、 linear-gradient()、 radial-gradient()、およびそれらの繰り返しのバリアントは、タイプの値を生成します <image>。 つまり、仕様が受け入れる場所ならどこでも url('photo.jpg')、グラデーションも受け付けます。 background-image、 border-image、 list-style-image、 mask-image、 content。 それはまた、グラデーションが持っていることを意味します 固有の次元はありません- 入れた箱を満たすように伸びているため、200px のボタンと 1400px のヒーローでは同じグラデーションが異なって見えます。

conic-gradient() 後で来て、住んでいる CSS 画像レベル 4、補間色空間の構文と並んで、以下に説明します。

線形、ラジアル、円錐の違いは何ですか?

線形勾配 - および角度規則

/* Default: top to bottom. No angle needed. */
background: linear-gradient(#4466EE, #E99537);

/* Keywords are the safe way to say it */
background: linear-gradient(to right, #4466EE, #E99537);
background: linear-gradient(to bottom right, #4466EE, #E99537);

/* Angles: 0deg = up, clockwise from there */
background: linear-gradient(90deg, #4466EE, #E99537);   /* same as `to right` */
background: linear-gradient(180deg, #4466EE, #E99537);  /* same as `to bottom` */
background: linear-gradient(135deg, #4466EE, #E99537);  /* top-left → bottom-right */

これを記憶に留めておけば、私の午後を繰り返すことはありません。

コーナーのキーワードで、もう 1 つの微妙な点があります。 to bottom right する でないよ 単に意味があります 135deg。 仕様は、勾配線が垂直になるように選択された角度として定義します。 ほかの 対角線 - これは、非正方形のボックス上で意味します、 to bottom right あんど 135deg 目に見えて異なる結果を生成します。 正方形では、それらは同一です。 午後 11 時に、カードがデザインが正しく見え、狭い列で間違っていることに気付くようなものです。

放射状の勾配 - サイズ キーワードが存在する場所

/* Simple */
background: radial-gradient(circle, #4466EE, #0F172A);

/* Positioned spotlight */
background: radial-gradient(circle at 30% 20%, #4466EE, transparent 60%);

/* Explicit size */
background: radial-gradient(circle closest-side at 60% 40%, #E99537, transparent);

4 つのサイズのキーワードで、 ファイナル 中心から測ったカラー ストップ ランド:

• closest-sideー箱の最も近い端
• farthest-sideー最も遠いエッジ
• closest-cornerー一番近い角
• farthest-cornerー一番遠い角()これがデフォルトです)

キーワードを変更すると、グラデーションが別のグラデーションのようになります。 これが、放射状の勾配が「自分が望むことをしない」最も一般的な理由であり、4 つのオプションをクリックする方がはるかに高速です。 グラデーションジェネ それについて推論するよりも。

円錐勾配 - パイ、ホイール、リング

コニックスイープカラー まわりが 中心は 12 時 & #39; から始まり、時計回りに進みます (線形と同じ規則 - 少なくとも it's は一貫しています)。

/* Colour wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

/* Pie chart with hard stops — 40% / 35% / 25% */
background: conic-gradient(
  #4466EE 0deg 144deg,
  #E99537 144deg 270deg,
  #34D399 270deg 360deg
);

/* Progress ring: conic + a mask */
.ring {
  background: conic-gradient(#4466EE 0turn 0.63turn, #E5E7EB 0.63turn 1turn);
  mask: radial-gradient(circle, transparent 60%, #000 61%);
  border-radius: 50%;
}

あれか mask ラインは、これまでに見たすべてのドーナツの進行状況インジケーターの背後にあるトリックであり、SVG ライブラリではなく、約 6 行の CSS です。

色の着地をどのように制御できますか?

色が止まる

停止位置を指定すると、移行を制御できます。 やめて 2つ ポジションを配置すると、補間がまったく行われず、ハードエッジが得られます。

/* Even (default) */
background: linear-gradient(to right, #4466EE, #E99537);

/* Explicit positions: solid blue to 30%, then blend */
background: linear-gradient(to right, #4466EE 30%, #E99537 70%);

/* Hard stops = stripes. The double-position syntax is Images 4. */
background: linear-gradient(
  to right,
  #4466EE 0 25%,
  #E99537 25% 50%,
  #34D399 50% 75%,
  #0F172A 75% 100%
);

補間のヒント (移動できるとは知らなかった中間点)

裸のパーセンテージ 間に 2 色は 50/50 中間点を移動します。 これは、私が知っている最もよく使われているグラデーション構文です。

/* Default: the halfway colour sits at 50% */
background: linear-gradient(to right, #4466EE, #E99537);

/* Halfway colour now sits at 25% — blue gives way early */
background: linear-gradient(to right, #4466EE, 25%, #E99537);

画像スクリムに使用します。 あ to top, rgba(0,0,0,.8), transparent 通常、オーバーレイは写真を食べ過ぎます。 35% ヒントを入れると、キャプションが置かれている下に向かって暗闇が崩壊します。

パターンの勾配を繰り返す

.hatched {
  background: repeating-linear-gradient(
    45deg,
    #0F172A 0 10px,
    #1E293B 10px 20px
  );
}

1 行、画像ファイルなし、無限にスケーラブル。 don'それをフルページ要素に適用して、なぜミッドレンジの Android でスクロールが途切れるのか疑問に思うだけです。スクロール中に大きな繰り返し勾配を再ペイントするのは、コンポジターにとって本当に仕事です。

グラデーションが真ん中で濁って見えるのはなぜですか?

2 つの別個の原因と、人々は常にそれらを混同します。

原因 1: sRGB 補間

デフォルトでは、ブラウザーのブレンド グラデーションはチャンネルごとに sRGB で停止します。ホイール上で互いに近くに位置する 2 つの色 (青から紫、オレンジから赤) の場合、that's は問題ありません。補色の場合、2 つの対向する sRGB 色の数学的中間点により、中央にデッド グレーのバンドが生成されます です ざっくり灰色。 青から黄色は、古典的な犯罪者です。

CSS イメージ レベル 4 では、補間スペースに名前を付けることができるようになり、これを修正します。

/* Grey sludge in the middle */
background: linear-gradient(to right, blue, yellow);

/* Vivid all the way through */
background: linear-gradient(in oklch, to right, blue, yellow);

oklch ブレンド全体で、知覚された明度と彩度を安定させます。 ブラウザのサポート in <colorspace> 現在の Chrome、Safari、および Firefox では構文は適切ですが、古いブラウザーをサポートする必要がある場合は、古い手動修正プログラムがあります。中間停止を追加して、自分でブレンドを操作します。

原因 2: フェード transparentーそして2 つ目の間違い

transparent として定義されます rgba(0, 0, 0, 0)。 透明 黒い。 ブラウザが素朴に補間した場合、 linear-gradient(#E99537, transparent) 無に向かう途中で、次第に暗くなり、灰色のオレンジ色を通り抜けます。

最新のブラウザは 'そうではありません。仕様には補間が必要です 事前に複数 問題を完全に回避するアルファ スペース。 しかし、古い Webkit はそうではありませんでした。私は、自分のマシン上できれいに見え、2 年前の iPad の汚れた汚れのように見える、クライアント サイトにヒーローを出荷しました。 費用はかからず、どこでも機能する防弾バージョンです。

/* Explicit: same colour, zero alpha */
background: linear-gradient(#E99537, rgba(233, 149, 55, 0));

私は今でも瘢痕組織からそのように書いています。

アクセシビリティで何に注意する必要がありますか?

コントラストはグラデーション全体で成り立つ必要があります

WCAG 2.1 SC 1.4.3 通常のテキストでは 4.5:1、大きなテキストには 3:1 が必要です (18pt、または 14pt 太字)。 グラデーションとは、すべてのピクセルで背景色が異なることを意味します。したがって、要件を満たす必要があります。 最悪の場合 ポイント - テキストが白の場合は最も明るいパッチ、白の場合は最も暗いパッチ 's 黒。

信頼できるパターンは、グラデーション自体を読みやすくしようとするのをやめ、上にスクリムを重ねることです。

.hero {
  background:
    linear-gradient(to bottom, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.8)),
    linear-gradient(135deg, #4466EE, #E99537);
  color: #fff;
}

現在、テキストは、下の勾配が何をしているかに関係なく、既知のダークレンジに置かれています。 で端を確認してください カラーピッカー 出荷する前に、2.38:1 に出荷したブランド カラーを含むフル コントラストのウォークスルーが表示されます カラーピッカーガイド。

グラデーション テキストはトラップドアです

これは、実際に生産ランディング ページで私を焼き払ったものです。

.gradient-heading {
  background: linear-gradient(135deg, #4466EE, #E99537);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

すれば background-clip: text does'古いブラウザ、背景画像をブロックする拡張機能、印刷スタイルシートなど、いかなる理由でも適用されません。あなたと#39;残ります color: transparent そして、 目に見えない見出し。 テキストはまだ DOM にあるので、スクリーン リーダーはそれを楽しく読み、何か問題があるとは思いません。 使い @supports それをゲートするために：

.gradient-heading { color: #0F172A; }

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-heading {
    background: linear-gradient(135deg, #4466EE, #E99537);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}

デフォルトでは、無地、エンハンスメントとしてのグラデーション。 初めて書いたはずのことです。

アニメーション グラデーションにはモーション エスケープ ハッチが必要

トランジション グラデーションはできません 色- ブラウザは勝ちました' t 2 つの間で補間します <image> 値。 人々がアニメーション化するのは、 background-position 特大のグラデーション全体:

.animated {
  background: linear-gradient(270deg, #4466EE, #E99537, #34D399);
  background-size: 600% 600%;
  animation: shift 12s ease infinite;
}

@keyframes shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .animated { animation: none; }
}

最後のブロックはオプションではありません。 連続バックグラウンドの動きは、前庭障害の文書化されたトリガーであり、名誉 prefers-reduced-motion 3行です。

(最新の代替案は、カスタム プロパティを登録することです。 @property したがって、そのタイプは知られており、 そこで アニメーション化可能で、グラデーション内で使用します。 クリーンで、現在のブラウザーではサポートされています。また、モーション ガードを減らしたとしても価値があります。

ツールを使ってどのように構築すればよいですか?

1. を開きます グラデーションジェネ。
2. タイプを選択します - 線形、放射状、または円錐形.
3. ストップをクリックして色を変更し、ドラッグして位置を移動します。 バーをクリックして停止を追加し、ドラッグして削除します。
4. 線形の場合は、角度をドラッグします。 番号に注意してください。 0deg- is-up の大会は抽象的ではなくなります。
5. ラジアルの場合、4 つのサイズのキーワードを循環させて、何が変わるかを観察します。 これは、彼らの直観を構築するための最も速い方法です。
6. CSS をコピーします。

通常、2 色が正しい答えです。 後悔したグラデーションはすべて 5 回でした。

盗む価値のあるグラデーション

/* Toolz brand diagonal */
background: linear-gradient(135deg, #4466EE, #E99537);

/* Deep UI surface — subtle enough that nobody calls it a gradient */
background: linear-gradient(to bottom, #1E293B, #0F172A);

/* Card lift: 4% of tonal difference, and it reads as depth */
background: linear-gradient(to bottom, #FFFFFF, #F8FAFC);

/* Mesh — four positioned radials over a base colour */
background-color: #4466EE;
background-image:
  radial-gradient(at 18% 24%, #E99537 0px, transparent 52%),
  radial-gradient(at 79% 17%, #34D399 0px, transparent 48%),
  radial-gradient(at 41% 83%, #8B5CF6 0px, transparent 55%);

/* Frosted glass */
background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.18);

あなた自身のブランドの色を カラーピッカー まず、HSL 値を取得し、次に色相ではなく明るさを変更します。それと#39;戦う代わりにきれいに溶け込むストップを取得する方法。

よくある質問

CSS 勾配が間違った方向に進んでいるのはなぜですか?

CSS 勾配角度は、 トップ そして増やす 時計回り、右から始まり、反時計回りに移動する三角法、SVG、またはキャンバスとは異なります。 to right です 90deg、 to bottom です 180deg、左上から右下の対角線は 135deg、ない 45deg。

まだ必要ですか -webkit- CSS グラデーションの接頭辞?

のためではない linear-gradient()、 radial-gradient()、または conic-gradient()ー3 つとも現在のブラウザーごとに接頭辞が外れて動作します。 prefix がまだキープを獲得している1 つの場所は -webkit-background-clip: text 古い Safari が必要とするグラデーション テキストの場合。 両方の宣言をそこに出荷します。

CSS グラデーションをアニメートできますか?

グラデーション値自体ではありません。グラデーションは です <image>、ブラウザーは 2 つの画像を補間しません。 標準的な回避策は、グラデーションをボックスよりも大きくすることです (background-size: 600% 600%) とアニメーション化 background-position。 現代のアプローチは、カスタム プロパティを次のように登録します。 @property つまり、既知のタイプであり、グラデーション内でアニメーション化できるようになります。 いずれにせよ、それを守ってください prefers-reduced-motion。

グラデーションが真ん中で灰色または濁っているのはなぜですか?

ほぼ常にホイール上で互いに反対側に座っている色の間のsRGB補間 - 青から黄色は古典的です彼らのsRGB中間点は純粋に灰色に近いですより良い補間スペースを命名することによってそれを修正します、 linear-gradient(in oklch, to right, blue, yellow)または、中間ストップを追加してブレンドを自分で操作します。

なぜ衰退するのか transparent 汚く見えますか？

transparent として定義されます rgba(0, 0, 0, 0)ー透明 黒い。 現在のブラウザは、前に乗算されたアルファ空間で補間されるため、これはもはや問題ではありませんが、古い WebKit はグラデーションを灰色に引きずり出してから引きずりました。 古いデバイスをサポートしている場合は、独自の色のゼロ アルファ バージョンを明示的に記述します。 rgba(233, 149, 55, 0) 代わりに transparent。

グラデーション ボーダーを作成するにはどうすればよいですか?

2 つのオプション。 border-image: linear-gradient(135deg, #4466EE, #E99537) 1; 一行ですが、静かに殺します border-radius。 角を丸くしたい場合は、2 つの背景を異なるレイヤーで重ねます background-clip あんど background-origin 値、またはボックスの後ろの疑似要素に勾配を配置します。

CSS 勾配はパフォーマンスに悪影響を及ぼしますか?

静的勾配は安いです - 同等の画像をダウンロードするよりも安く、それは無料で任意のサイズにスケールします 大きな勾配でなければならないときにコストが表示されます 再塗装しました 繰り返し: スクロール中のページ全体の繰り返し勾配、または下にあるいくつかの階層化されたグラデーション backdrop-filter。 モバイルでページがベタベタした場合、DevTools をペイントして最初にチェックインするのは、これだけです。

グラデーションには何色のストップがあるべきですか?

2、ほとんどの場合。 特定の色合いでブレンドを操縦したい場合は 3 つ。 それを超えて、通常、メッシュのグラデーション (いくつかの位置決めされたラジアル) の方が効果的で、他の誰かのディスプレイでは、別のストップが 1 つおかしいことがあります。

CSS でグラデーションの背景を作成するにはどうすればよいですか?

設定します background （または background-image) 勾配関数のプロパティ。 background: linear-gradient(to right, #4466EE, #E99537); 画像ファイルをまったく持たない左から右へのブレンドをペイントします。 radial-gradient() あんど conic-gradient() 円形とスイープト ブレンドについても同じパターンに従ってください。 結果はダウンロードされるのではなく生成されるため、どのサイズでもシャープなままです。

CSS でグラデーション テキストを作成するにはどうすればよいですか?

グラデーションを入れる background、次に設定します background-clip: text ( -webkit- Safari の接頭辞) および color: transparentということで、文字は無地ではなくグラデーションで塗りつぶされます。 実文を画像に焼き付けるのではなく、マークアップに保存して、スクリーン リーダーが選択して読みやすくすることができます。

まとめ

グラデーションは、ゼロネットワークコストのための本当の視覚の豊かさを与える数少ないCSS機能の1 つです - 画像要求なし、アスペクト比の問題なし、構築による解像度に依存しない 構文は小さい トラップは具体的で知ることができます: 角度の慣習、放射状のサイズのキーワード、sRGBの濁り、グラデーションテキスト内の見えない見出しのトラップドア。

見えるところに作ってください。 ザ・ グラデーションジェネ 無料で、ブラウザで完全に実行され、CSS をクリーンにコピーします。 それとペアリング カラーピッカー コントラストを保持するストップの場合、 CSS ミニファイア インライン化の準備ができたら。 フロントエンド シェルフの残りの部分は、 開発者の生産性向上ツール ガイド。