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);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

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によって二重のボーダーが発生していないこと。
• 角丸がサーフェスと完全に一致していること。
• 通常のズームではグラデーションが見え、ざっと見たときにはかろうじて気づく程度であること。
• フォーカス状態がアクセシビリティを保ち、グラデーションだけに依存していないこと。