css-border-gradient

📁 mengto/skills 📅 6 days ago

总安装量

周安装量

#52947

全站排名

安装命令

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

Agent 安装分布

replit 1

opencode 1

cursor 1

codex 1

Skill 文档

CSS Border Gradient Skill

Workflow

Confirm environment (plain CSS vs Tailwind) and gather missing specs (border radius, thickness, angle, colors).
Provide the baseline snippet and a short usage checklist.
Offer focused tweaks only (change angle, colors, thickness, radius) and avoid redesigning the component.

Baseline snippet

.border-gradient {
  position: relative;
}

.border-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  padding: 1px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  background: linear-gradient(225deg,
    rgba(255, 255, 255, 0.0) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.0) 100%);
  pointer-events: none;
}

Usage checklist

Insert the snippet in global CSS or the page <head>.
Add border-gradient to the element.
Remove any existing border styles.
Match the element radius to the pseudo-element radius.

Tailwind example

<div class="border-gradient rounded-lg before:rounded-lg">
  ...
</div>

If a project uses Tailwind layers, wrap the class in @layer utilities.

Customization knobs

Thickness: change padding (for example 2px).
Radius: change border-radius or the before:rounded-* class.
Angle: change the linear-gradient(225deg, ...) angle.
Colors: adjust the rgba(...) stops to fit the theme.

Common pitfalls

Mismatched radius between the element and pseudo-element.
Leaving an existing border on the element (double border).
Tailwind purge removing the class because it is not referenced in content files.

Questions to ask when specs are missing

What border radius and thickness do you want?
What gradient angle and colors should it use?
Is this for light, dark, or both themes?

GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台