濁らせず境界を思い通りに

<div class="grid">
  <figure><div class="swatch smooth"></div><figcaption>停止位置が離れている（滑らかに移る）</figcaption></figure>
  <figure><div class="swatch split"></div><figcaption>50% に2色を重ねる（境界がはっきり）</figcaption></figure>
  <figure><div class="swatch stripes"></div><figcaption>repeating で縞模様</figcaption></figure>
  <figure>
    <!-- 見た目だけでなく、値を role="progressbar" と aria-valuenow で伝える -->
    <div class="progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="アップロードの進み具合"></div>
    <figcaption>進捗バー（64%）</figcaption>
  </figure>
  <figure><div class="pie" role="img" aria-label="内訳: 青45%、緑30%、黄25%"></div><figcaption>conic-gradient の円グラフ</figcaption></figure>
</div>

/* 滑らかに移る。色の停止位置が離れているので、間が補間される */
.smooth { background: linear-gradient(90deg, #2563eb 0%, #22c55e 100%); }

/* 境界線をはっきりさせる。同じ位置（50%）に2色の停止を重ねると、
   その間の距離が0になり、補間される幅が無くなる */
.split { background: linear-gradient(90deg, #2563eb 50%, #22c55e 50%); }

/* 縞模様。停止位置を0にした2つ目以降は「直前の位置」扱いになるので、
   繰り返しの1周期ぶんだけ書けばよい */
.stripes {
  background: repeating-linear-gradient(
    -45deg,
    #1e293b 0 12px,
    #334155 0 24px
  );
}

/* 進捗バー。値をカスタムプロパティで渡し、境界の位置に使う。
   バーの要素を2つ重ねずに1枚の背景で描ける */
.progress {
  --value: 64%;
  height: 14px;
  border-radius: 99px;
  background: linear-gradient(90deg, #2563eb var(--value), #e2e6ee var(--value));
}

/* 円グラフ。conic-gradient も同じ考え方で、角度を重ねると境界がはっきりする */
.pie {
  width: 110px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    #2563eb 0 45%,
    #22c55e 0 75%,
    #f59e0b 0 100%
  );
}

<div class="row"><p>in srgb: 中間が灰色に濁る</p><div class="bar srgb"></div></div>
<div class="row"><p>in oklch: 色相を回って鮮やかなまま移る</p><div class="bar oklch"></div></div>
<div class="row"><p>in oklab: 暗く沈むのは防ぐが、中間の彩度は落ちる</p><div class="bar oklab"></div></div>
<div class="row"><p>非対応ブラウザにも備えた書き方</p><div class="bar safe"></div></div>

/* in srgb を明示してで青から黄色へ。中間がくすんだ灰色になる。
   sRGB は RGB の値をそのまま直線で結ぶので、反対色どうしの間で
   彩度が落ちる */
.srgb { background: linear-gradient(90deg, #2563eb, #facc15); background: linear-gradient(in srgb 90deg, #2563eb, #facc15); }

/* 補間の色空間に oklch を指定する。明るさ・鮮やかさ・色相を分けて
   補間するので、中間でも彩度が保たれる（青→緑→黄と色相を回って移る） */
.oklch { background: linear-gradient(in oklch 90deg, #2563eb, #facc15); }

/* oklab は色相を回らず直線で結ぶ。中間が暗く沈むのは防げるが、
   彩度は落ちる。色相を経由させたくないとき（別の色が混ざって見えると
   困るとき）はこちら */
.oklab { background: linear-gradient(in oklab 90deg, #2563eb, #facc15); }

/* 非対応ブラウザには、中間色を手で1つ足した sRGB の指定が先に効く。
   後から書いた in oklch が読めるブラウザだけ上書きされる */
.safe {
  background: linear-gradient(90deg, #2563eb, #16a34a, #facc15);
  background: linear-gradient(in oklch 90deg, #2563eb, #facc15);
}

<section class="mesh">
  <h2>請求業務を、毎月3日から30分へ。</h2>
  <p>背景は4つの円形のグラデーションを重ねただけです。色と位置を変えるだけで、季節やキャンペーンに合わせた表情を作れます。</p>
</section>

.mesh {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2.5rem, 7vw, 4.5rem) clamp(1.5rem, 5vw, 3rem);
  color: #fff;
  border-radius: 20px;
  /* 地の色の上に、位置と大きさの違う radial を重ねる。
     重ねる順は「後に書いたものほど下」。いちばん下に地の色を置く */
  background:
    radial-gradient(40% 55% at 15% 20%, #7c3aed 0%, transparent 70%),
    radial-gradient(45% 60% at 85% 15%, #ec4899 0%, transparent 70%),
    radial-gradient(50% 65% at 70% 90%, #f59e0b 0%, transparent 70%),
    radial-gradient(45% 60% at 20% 85%, #2563eb 0%, transparent 70%),
    #0f172a;
}

/* 縞（バンディング）を消すノイズ。広い面の緩やかなグラデーションは
   8bit の色で段が見えやすい。ごく薄い粒を重ねると段が目立たなくなる。
   ノイズは SVG の feTurbulence を data URI で埋め込み、画像ファイルを増やさない */
.mesh::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}

.mesh h2 { margin: 0 0 .6rem; font-size: clamp(1.5rem, 4vw, 2.2rem); line-height: 1.4; }
/* 背景が明るい部分に来ても読めるよう、文字の後ろにだけ薄い影を敷く。
   背景全体を暗くするより、色の鮮やかさを保てる */
.mesh h2, .mesh p { text-shadow: 0 1px 12px rgba(15, 23, 42, .45); }
.mesh p { margin: 0; max-width: 34em; line-height: 1.85; }

<div class="hero">
  <h1 class="grad-text">見出しだけに色を集める</h1>
  <p>本文は単色のまま。グラデーションは1画面に1か所だけにします。</p>
</div>

/* 角度を動かせるよう、型付きのカスタムプロパティとして登録する。
   登録しないと、カスタムプロパティは文字列として扱われ、アニメーションしない */
@property --angle {
  syntax: "<angle>";
  initial-value: 90deg;
  inherits: false;
}

.grad-text {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.3;
  /* 背景が描けない環境（強制カラーモードなど）で、この色がそのまま出る */
  color: #4338ca;
}
/* 対応している環境でだけ、文字を透明にして背景を文字の形に切り抜く。
   先に color を透明にしてから非対応だと、文字が消えて何も読めなくなる */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .grad-text {
    /* いちばん明るい色でも地とのコントラストが 4.5:1 を切らない範囲に留める */
    background: linear-gradient(var(--angle), #4338ca, #be185d 55%, #c2410c);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: turn 8s linear infinite;
  }
}
@keyframes turn { to { --angle: 450deg; } }

/* 動きを減らす設定では止める。止めても色の並びはそのまま残る */
@media (prefers-reduced-motion: reduce) {
  .grad-text { animation: none; }
}
/* 強制カラーモードでは背景が消されるので、文字色を元に戻す */
@media (forced-colors: active) {
  .grad-text { color: CanvasText; background: none; }
}