CSS Tips | 超実務コアCSSテクニック：カラー・背景 － グラデーションボーダー

Web APP CSS
スポンサーリンク
スポンサーリンク

グラデーションボーダーは「線そのものをデザインする」テクニック

ボーダーは本来「1色の線」ですが、
グラデーションボーダーを使うと 枠そのものが装飾要素 になります。

カード、ボタン、バッジ、セクションの囲みなどで使うと、
一気に「デザインしている感」が出る、かなりコスパの良いテクニックです。

ここでは、
純粋な CSS パターンと Tailwind CSS での書き方を、
初心者向けにかみ砕いて解説していきます。

パターン1：擬似要素で「枠だけグラデーション」にする王道テクニック

仕組みの考え方

本体の要素の後ろに、
「一回り大きいグラデーション背景の箱」を重ねて、
中身だけ単色でくり抜くイメージです。

「外側がグラデーション」「内側が背景色」という二重構造を作ることで、
グラデーションボーダーに見せています。

CSS 版（カードのグラデーションボーダー）

.card {
  position: relative;
  border-radius: 1rem;
  padding: 1.5rem;
  background: #0f172a;
  color: white;
  z-index: 0;
}

.card::before {
  content: "";
  position: absolute;
  inset: -2px; /* 外側に2px広げる = ボーダーの太さ */
  border-radius: inherit;
  background: linear-gradient(135deg, #3b82f6, #ec4899);
  z-index: -1;
}
CSS
<div class="card">
  グラデーションボーダーカード
</div>
HTML

Tailwind 版

<div class="relative z-0 rounded-2xl p-6 bg-slate-900 text-white
            before:content-[''] before:absolute before:-inset-[2px]
            before:rounded-2xl before:bg-[linear-gradient(135deg,#3b82f6,#ec4899)]
            before:-z-10">
  グラデーションボーダーカード
</div>
HTML

ここを深掘り：inset と z-index の意味

inset:-2px が「外側に2pxはみ出す」＝ボーダーの太さになります。
本体より少し大きい擬似要素を作ることで、
「外側だけ色が見える」＝ボーダーに見える、という仕組みです。

z-index は
本体（0）より擬似要素（-1, -10）を後ろに置くために使っています。

パターン2：背景をグラデーションにして内側を単色で塗る

仕組みの考え方

親要素にグラデーション背景を敷き、
内側に「少し小さい単色の箱」を入れることで、
周囲だけグラデーションが見えるようにします。

擬似要素を使わずに、
HTML の入れ子だけで実現できるので分かりやすいです。

CSS 版

.border-gradient {
  padding: 2px; /* ボーダーの太さ */
  border-radius: 9999px;
  background: linear-gradient(90deg, #3b82f6, #ec4899);
  display: inline-block;
}

.border-gradient-inner {
  padding: 0.5rem 1.5rem;
  border-radius: inherit;
  background: #020617;
  color: white;
}
CSS
<div class="border-gradient">
  <button class="border-gradient-inner">
    グラデーションボタン
  </button>
</div>
HTML

Tailwind 版

<div class="inline-block p-[2px] rounded-full
            bg-[linear-gradient(90deg,#3b82f6,#ec4899)]">
  <button class="px-4 py-2 rounded-full bg-slate-950 text-white">
    グラデーションボタン
  </button>
</div>
HTML

ここを深掘り：padding が「ボーダーの太さ」になる

外側の要素の padding が、そのまま「枠の太さ」になります。
中身の要素は border-radius: inherit で同じ丸みを継承することで、
きれいな“二重構造”になります。

パターン3：border-image を使った「純粋 CSS のグラデーションボーダー」

仕組みの考え方

border-image は「ボーダーに画像やグラデーションを貼る」ためのプロパティです。
少しクセがありますが、
「擬似要素を増やしたくない」「構造を増やしたくない」場合に使えます。

CSS 版

.box {
  border: 3px solid transparent;
  border-radius: 1rem;
  border-image: linear-gradient(135deg, #3b82f6, #ec4899) 1;
  padding: 1.5rem;
}
CSS
<div class="box">
  border-image を使ったグラデーションボーダー
</div>
HTML

ここを深掘り：border: transparent が必要な理由

border-image は「ボーダーの上に画像を貼る」イメージなので、
元の border 色は透明にしておきます。
border-image: グラデーション 1; の「1」はスライス値で、
「グラデーション全体をそのまま使う」という指定です。

Tailwind での扱い

border-image は Tailwind の標準ユーティリティにはないため、
任意値クラスか、CSS にクラスを定義して使うのが現実的です。

<div class="border-[3px] border-transparent rounded-2xl
            [border-image:linear-gradient(135deg,#3b82f6,#ec4899)_1] p-6">
  Tailwind 任意値で border-image
</div>
HTML

パターン4：円形のグラデーションボーダー（アバター・ロゴに最適）

CSS 版

.avatar-wrap {
  padding: 3px;
  border-radius: 9999px;
  background: conic-gradient(#3b82f6, #ec4899, #22c55e, #3b82f6);
  display: inline-flex;
}

.avatar-inner {
  width: 64px;
  height: 64px;
  border-radius: inherit;
  background: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
}
CSS
<div class="avatar-wrap">
  <div class="avatar-inner">A</div>
</div>
HTML

Tailwind 版

<div class="inline-flex p-[3px] rounded-full
            bg-[conic-gradient(#3b82f6,#ec4899,#22c55e,#3b82f6)]">
  <div class="w-16 h-16 rounded-full bg-slate-900 flex items-center justify-center text-white font-semibold">
    A
  </div>
</div>
HTML

ここを深掘り：conic-gradient × 枠は相性抜群

円形の枠に conic-gradient を使うと、
「ぐるっと色が回る」リッチなボーダーになります。
アバター・ロゴ・バッジなど、
小さな要素に使うとかなり映えます。

パターン5：カードの「ほんのりグラデーションボーダー」で高級感を出す

CSS 版

.card-soft {
  position: relative;
  border-radius: 1.25rem;
  padding: 1.5rem;
  background: #020617;
  color: white;
  z-index: 0;
}

.card-soft::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(148,163,184,0.4), rgba(15,23,42,0.8));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: -1;
}
CSS

※ mask を使った少し上級テクですが、「内側だけくり抜く」綺麗なボーダーが作れます。

Tailwind 版（イメージ寄り）

Tailwind だけで mask まで書くのは少し複雑なので、
このパターンは CSS にクラスを定義して使う方が現実的です。

どのパターンをいつ使うか（ここが一番大事）

擬似要素パターン

コンポーネント単体で完結させたいとき。
HTML を増やしたくないとき。
カード・セクションなどに向いています。

入れ子パターン（外側グラデーション＋内側単色）

ボタン・バッジ・アバターなど、
「中身の要素がはっきりしている」場合に最適。
Tailwind との相性も抜群です。

border-image パターン

構造を増やしたくない、
でも擬似要素も使いたくない、
というときの“純 CSS” 解。

実務テンプレート：そのまま使えるグラデーションボーダーセット（Tailwind）

グラデーションボタン枠

<div class="inline-block p-[2px] rounded-full
            bg-[linear-gradient(90deg,#3b82f6,#ec4899)]">
  <button class="px-5 py-2 rounded-full bg-slate-950 text-white text-sm font-medium">
    グラデーションボタン
  </button>
</div>
HTML

カードのグラデーションボーダー

<div class="relative z-0 rounded-2xl p-6 bg-slate-900 text-white
            before:content-[''] before:absolute before:-inset-[2px]
            before:rounded-2xl before:bg-[linear-gradient(135deg,#3b82f6,#ec4899)]
            before:-z-10">
  <h3 class="text-lg font-semibold mb-2">Premium Plan</h3>
  <p class="text-sm text-slate-300">グラデーションボーダーで“特別感”を演出。</p>
</div>
HTML

アバターのグラデーションボーダー

<div class="inline-flex p-[3px] rounded-full
            bg-[conic-gradient(#3b82f6,#ec4899,#22c55e,#3b82f6)]">
  <div class="w-12 h-12 rounded-full bg-slate-900 flex items-center justify-center text-white text-sm font-semibold">
    Y
  </div>
</div>
HTML

まとめ

グラデーションボーダーは
「ただの線」を「デザインの主役」に変えるテクニックです。

押さえておきたいポイントは、
擬似要素で外側にグラデーションを敷く方法、
入れ子構造で枠だけグラデーションにする方法、
そして Tailwind では before: と任意値 bg-[linear-gradient(...)] を組み合わせる、
この3つを軸に考えると迷いません。

スポンサーリンク
タイトルとURLをコピーしました