CSS Border Gradient skill

Border Gradients

Use When

• A surface needs a more premium edge than a flat border.
• Dark glass, pricing, hero, modal, or feature-card UI feels too plain.
• A hover or focus state needs a quiet brand accent.

Defaults

• Width: 1px; use 2px only for large hero cards or active states.
• Radius: inherit the parent radius.
• Angle: 135deg or 160deg.
• Stops: neutral highlight, one brand accent, neutral fade.
• Opacity: keep most stops below 0.4; subtle beats shiny.

Simple CSS Pattern

Use this when the surface has a solid or translucent fill.

.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>

Masked Pattern

Use this when the surface already has a complex background that should not be overwritten.

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

Both mask and -webkit-mask are required. mask-composite: exclude needs mask layers declared on the unprefixed property to have anything to composite — ship only -webkit-mask and spec-compliant engines get no mask at all, so the ::before renders as a solid rectangle covering the whole surface. The two composite keywords are not interchangeable either: WebKit's legacy property takes xor, the standard property takes exclude.

Tailwind Shortcut

Use arbitrary properties for one-off surfaces.

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

Taste Rules

• Apply to one hierarchy level at a time: primary card, active tab, selected plan, or hero panel.
• Do not use rainbow borders, full-saturation neon, or animated gradients by default.
• Keep the border quieter than the content. It should frame, not compete.
• Pair with restrained depth: a soft shadow or inner highlight is enough.
• Check light and dark themes separately; the same alpha rarely works for both.

Quick Checks

• No double border from an existing border-color.
• Radius matches the surface exactly.
• The gradient is visible at normal zoom but barely noticeable when scanning.
• Focus states remain accessible and do not rely only on the gradient.