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

線の両端を薄くしたいけど出来る？

見出しの両端に線を引くことはよくあると思います。

例えばこんな感じです。

See the Pen
左右に指定した長さの横線 by junpei (@junpei-sugiyama)
on CodePen.

今回はこれで左右の線を徐々に薄く透過させる方法を2種類解説していきます。

じゅんぺいブログは、Web制作（コーディング・WordPress制作）の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください！

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適です。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
（有料になっていたらすいません🙇‍♂️）

＼完全無料／

ZeroPlus Gate公式サイト

毎日先着制！

border(線)の両端を徐々に透過させる方法

タイトルの両端に線がある場合と、タイトルの上下に一本の線がある場合の2種類を解説します。

HTMLは共通でこちらになります。

<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;
}

ポイントはbackground-imageで、左の線は左から右に向かって『透明 → 黒』になり、右の線は右から左に向かって『透明 → 黒』になります。

See the Pen
線の両端を徐々に透過（タイトルの両端） by junpei (@junpei-sugiyama)
on CodePen.

タイトルの上下に線がある場合

上下に線が一本ある場合はこちらです。

/* 上下に横線 */
.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%;
}

タイトルの上下に一本線を引いています。

ポイントはbackground-image: linear-gradient(to right, transparent, #000 50%, transparent);で、両端はtransparentで透過させ、真ん中(50%)から両端に向かって色は#000にしています。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.