スタックオーバーフローなしのCSSグラデーション — 可視化して生成し、配布する

新しいCSSファイルを開き、入力しました background:、そして画面を眺めていました。あなたはグラデーションを知っています。そのプロパティは linear-gradientです。角度が先か後か、または度数が時計回りか反時計回りか、あるいは入力した色がイメージした通りに見えない理由を思い出せません。

この記事はそれを解決します。CSSのグラデーションが実際にどのように機能するか、その構文、角度の論理、そして実際に使うパターンについて説明し、視覚的な生成ツールへのリンクを提供して、推測を止め、実際の開発に移すことができます。

linear-gradientが実際にどのように機能するか

基本的な構文は:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

それは人々を混乱させます。2つの選択肢があります：キーワードまたは度数の角度です。 direction キーワード:

(デフォルト), to top, to bottom 、そして対角線: to left, to right度数: to top right, to bottom left(0–6または1–7) — 日曜日は

は上向き（ 0deg と同じ）です。角度は時計回りに増加するため、 to topは右に、 90deg は下に、 180deg は左に進みます。 270deg ここに覚えておくべきポイントがあります:

0deg = 上、そこから時計回りです。 それ以外はそれから導かれます。 この週で使う6つのパターン

1. 上から下へ（デフォルト）

2. 透過にフェード

background: linear-gradient(to bottom, #667eea, #764ba2);

画像の上にテキストをオーバーレイする場合、下は暗く、上は明るくなければならない。これを

としましょう transparent:

background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);

ただし、注意点があります。カラーバリューから透過に移行する際には、Safariでは黒を通じて補間します。代わりに、同じRGB値を使用して transparent を使用してください。 rgba(r, g, b, 0) 3. 斜めのヒーロー背景

は左下から右上へ、マガジンのカバーのような角度です。このような複数の色のグラデーションは、各色の位置パーセンテージで定義されます。パーセンテージがなければ、CSSはそれらを均等に分配します。

background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #fda085 100%);

135deg 4. サブティルなカードの陰影

白のカードは、白のページに対して平坦に見えます。純白から非常に薄いグレーへのわずかなグラデーションは、デザインされているように見えず、深みを与えることができます。このグラデーションは誰も気づかないもので、その点が重要です。

background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);

5. ボタンのオーバーレイ

左から右へ（

background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);

）のグラデーションはダイナミックに見えます。ホバー状態で背景の位置をシフト（90degとトランジションを使用）することで、ボタンにスライド効果をもたらします。 background-size: 200% 6. ハードな色の停止（ブレンドなし） background-position同じ位置に2つの色の停止があると、明確な線が形成され、ブレンドがありません。スプリットスクリーンレイアウト、進行バー、ストライプパターンなどに便利で、追加の要素や画像を使わずに実現できます。

径方向グラデーション：もう一つ

background: linear-gradient(90deg, #e74c3c 50%, #3498db 50%);

は中心点から外側に拡がるのではなく、方向に移動します:

最初の引数は形状（

radial-gradient ）で、その後に位置です。

background: radial-gradient(circle at center, #a18cd1 0%, #fbc2eb 100%);

はデフォルトです。焦点を移動させるにはcircle または ellipse、などを使います。径方向グラデーションは、スポットライト効果、輝くボタン、径方向のページ背景に非常に適しています。 at center 構文の記憶が難しいこと（そしてそれを決して忘れずに使う方法） at top left, at 30% 60%開発者が困る3つのこと、頻度順に:

角度が色の前に来る

— 方向は常に色の前に来ます。

• 時計回りの度数 は右、上ではありません。
• は上です。 — 90deg 透過から色への帯 0deg — ブラウザは、両端のRGBA値が一致しない限り黒を通じて補間します。
• もし試行錯誤を完全に避けたいなら、 iotools.cloud では色を視覚的に選択、ストップをドラッグ、角度を反転し、最終的なCSSをワンクリックでコピーできます。もう

がどう見えるかを推測する必要がありません。 CSS グラデーションジェネレーター はすべての現代ブラウザで基本的なサポートを受けている—Chrome、Firefox、Safari、Edgeはすべてプレフィックスなしでサポートしています。2026年において、標準のグラデーション構文にはプレフィックスは必要ありません。 143deg ただし、古い

ブラウザのサポート

linear-gradient と radial-gradient 構文（Safari 5.1およびChrome 10–25で使用）は例外です。2012年以前のブラウザをサポートする必要がない場合、無視できます。 -webkit- は現代ブラウザで強いサポートを受けているが、IEや古いブラウザへのフォールバックは存在しない—常にブラウザの最低要求が恒常的である場合に使用してください。

構文をスキップして視覚的に生成 -webkit-linear-gradient CSSグラデーションの構文は複雑ではありませんが、手で調整するのは面倒です。iotools.cloudの

conic-gradient はライブプレビュー、色のストップをドラッグ、線形または径方向の制御、ワンクリックでコピーできる機能を提供します。視覚的にグラデーションを作成し、出力のコピーを貼り付けて、すぐに実装できます。

構文をスキップして視覚的に生成

CSSのグラデーション構文は複雑ではありませんが、手で調整するのは面倒です。 CSS グラデーションジェネレーター iotools.cloudではライブプレビュー、色のストップをドラッグ&ドロップで調整、線形または径方向のタイプ制御、ワンクリックでコピーが可能です。視覚的にグラデーションを作成し、出力結果を貼り付けて完成させます。

あなたも好きかもしれません