CSSでborder(線)の両端を徐々に透過させる方法【サンプル付き】

<h2 class="heading">タイトル</h2>

/* 左右に横線 */
.heading {
  align-items: center; /* 横線を上下中央 */
  display: flex; /* 文字と横線を横並び */
  justify-content: center; /* 文字を中央寄せ */
}
.heading::before,
.heading::after {
  content: "";
  height: 2px; /* 横線の高さ */
  max-width: 300px; /* 横線の最大の長さ */
  width: 1005; /* 横線の長さの割合 */
}
/* 左の横線 */
.heading::before {
  background-image: linear-gradient(to right, transparent, #000); /* 線の左端を透過 */
  margin-right: 15px; /* 文字との余白 */
}
/* 右の横線 */
.heading::after {
  background-image: linear-gradient(to left, transparent, #000); /* 線の右端を透過 */
  margin-left: 15px; /* 文字との余白 */
}
/* レイアウトのためのスタイル */
.heading {
  font-size: clamp(16px, 5vw, 30px);
  font-weight: 700;
  margin-top: 30px;
}

/* 上下に横線 */
.heading::before,
.heading::after {
  background-image: linear-gradient(to right, transparent, #000 50%, transparent); /* 線の両端を透過 */
  background-repeat: no-repeat;
  content: "";
  height: 2px; /* 横線の高さ */
  left: 0; /* 線を中央寄せ */
  margin-inline: auto; /* 線を中央寄せ */
  max-width: 800px; /* 横線の最大の長さ */
  position: absolute;
  right: 0; /* 線を中央寄せ */
  width: 100%; /* 横線の長さの割合 */
}
/* 下の線 */
.heading::before {
  bottom: 0; /* タイトルの下に配置 */
}
/* 上の線 */
.heading::after {
  top: 0; /* タイトルの上に配置 */
}
/* レイアウトのためのスタイル */
.heading {
  font-size: clamp(16px, 3vw, 30px);
  font-weight: 700;
  margin-top: 30px;
  padding-bottom: 30px;
  padding-top: 30px;
  position: relative;
  text-align: center;
  width: 100%;
}