CSS Border Gradient Skill

SkillDev tools

Create CSS gradient borders using the pseudo-element mask technique (mask-composite), including Tailwind-friendly usage and customization of angle, colors, thickness, and radius.

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Account requirements not reviewed. Check the skill instructions before use; ahel provides instructions and does not run this skill.

Add ahel to your AI once: Claude, ChatGPT, Cursor, Claude Code or Codex. Then ask it to use this.

Then ask your AI: use the CSS Border Gradient Skill skill

What this skill tells your AI

The instructions your AI receives, as published by bidewio/better-openclaw in skills/css-border-gradient/SKILL.md and read by ahel’s review.

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 snippet in global CSS or page <head>
Add border-gradient class to the element
Remove any existing border styles
Match element radius to pseudo-element radius

Tailwind example

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

Customization knobs

Thickness: Change padding (e.g., 2px)
Radius: Change border-radius or before:rounded-* class
Angle: Change linear-gradient(225deg, ...) angle
Colors: Adjust rgba(...) stops to fit theme

Common pitfalls

Mismatched radius between element and pseudo-element
Leaving an existing border on the element (double border)
Tailwind purge removing the class

Tips for AI Agents

Ask about border radius, thickness, gradient angle, and colors.
Confirm light/dark theme support needs.

Signals

GitHub stars: 58
Forks: 6
Last commit: Aug 2026

Advanced

Item type: skill
Key: css-border-gradient
Source: github.com/bidewio/better-openclaw

github.com/bidewio/better-openclaw