mcpField
C
css-border-gradient

css-border-gradient

github.com/mengtoDesign & UI7.1k1.6k installsUpdated 3d ago
Repository

About css-border-gradient

A CSS design skill for adding gradient borders to interface surfaces such as cards, modals, and pricing panels. It covers simple and masked patterns, Tailwind shortcuts, and guidance for keeping accents subtle and accessible.

Key features

  1. 01Solid-fill gradient border pattern
  2. 02Masked border for complex backgrounds
  3. 03Tailwind arbitrary-property shortcut
  4. 04Theme and focus-state checks

Use cases

  1. 01Accenting a primary feature card
  2. 02Framing an active tab or selected plan
  3. 03Styling a dark modal or hero panel

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/mengto/skills --skill css-border-gradient

After installing, type/css-border-gradientin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

demo/
index.html
PROMPT.md
source.json

Details

From the project README

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

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.

Comments

Markdown supported