css-border-gradient

ボーダーグラデーション

使用する場面

• フラットなborderより、表面の縁を高級感のある仕上がりにしたい場合。
• ダークなガラス調、料金プラン、ヒーロー、モーダル、機能カードのUIが物足りない場合。
• ホバーまたはフォーカス状態に、控えめなブランドアクセントを加えたい場合。

デフォルト設定

• 幅：1px。大きなヒーローカードまたはアクティブ状態の場合に限り、2pxを使用します。
• 角丸：親要素の角丸を継承します。
• 角度：135degまたは160deg。
• カラーストップ：ニュートラルなハイライト、ブランドアクセントを1つ、ニュートラルなフェード。
• 不透明度：ほとんどのストップを0.4未満に保ちます。華やかさより控えめな仕上がりを優先します。

シンプルなCSSパターン

表面に単色または半透明の塗りがある場合に使用します。

.gradient-border {
  --surface: rgba(10, 14, 24, 0.72);
  --border-a: rgba(255, 255, 255, 0.34);
  --border-b: rgba(125, 92, 255, 0.36);
  --border-c: rgba(255, 255, 255, 0.08);

  border: 1px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, var(--border-a), var(--border-b), var(--border-c)) border-box;
}

<div class="gradient-border">
  ...
</div>

マスクを使うパターン

すでに複雑な背景があり、上書きしたくない表面に使用します。

.gradient-border-mask {
  position: relative;
  border-radius: 20px;
}

.gradient-border-mask::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.34),
    rgba(125, 92, 255, 0.36) 45%,
    rgba(255, 255, 255, 0.08)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

maskと-webkit-maskの両方が必要です。mask-composite: excludeで合成するには、マスクレイヤーをプレフィックスなしのプロパティで宣言する必要があります。-webkit-maskのみを設定すると、仕様に準拠したエンジンではマスクが適用されず、::beforeが表面全体を覆う単色の長方形として描画されます。また、2つの合成キーワードは互換ではありません。WebKitのレガシープロパティではxorを、標準プロパティではexcludeを使用します。

Tailwindの簡易記法

単発で使う表面には任意プロパティを使用します。

<div class="rounded-2xl border border-transparent [background:linear-gradient(rgba(10,14,24,.72),rgba(10,14,24,.72))_padding-box,linear-gradient(135deg,rgba(255,255,255,.34),rgba(125,92,255,.36),rgba(255,255,255,.08))_border-box]">
  ...
</div>

デザインの基本ルール

• 一度に適用する階層は1つに絞ります。プライマリカード、アクティブなタブ、選択中のプラン、またはヒーローパネルなどが対象です。
• デフォルトでは、虹色のボーダー、彩度の高いネオン、アニメーション付きグラデーションを使用しません。
• ボーダーはコンテンツより控えめにします。競い合うのではなく、枠として引き立てるものです。
• 控えめな奥行きと組み合わせます。柔らかなシャドウまたは内側のハイライトで十分です。
• ライトテーマとダークテーマを別々に確認します。同じアルファ値が両方に適するとは限りません。

簡易チェック

• 既存のborder-colorによる二重ボーダーがないこと。
• 角丸が表面と正確に一致すること。
• 通常のズームではグラデーションが見え、流し見ではほとんど気にならないこと。
• フォーカス状態がアクセシブルであり、グラデーションだけに依存していないこと。