How do I install the Web CSS Border Gradient skill?

Run npx skillmds@latest add oimiragieo/web-css-border-gradient in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Web CSS Border Gradient safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Web CSS Border Gradient?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Web CSS Border Gradient free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Web CSS Border Gradient?

oimiragieo (@oimiragieo) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Web CSS Border Gradient by oimiragieo

Name: Web CSS Border Gradient
Author: oimiragieo

Web CSS Border Gradient

Create and apply CSS gradient borders using a pseudo-element mask (the .border-gradient::before technique), including Tailwind-friendly usage and customization of angle, colors, border thickness, and radius. Use when asked for gradient borders, border glow, or the specific mask-composite border gradient snippet.

oimiragieo f0df34b 2.2 KB Updated Sep 17, 2026 0 repo stars

File contents

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?

---name: web-css-border-gradientdescription: Create and apply CSS gradient borders using a pseudo-element mask (the .border-gradient::before technique), including Tailwind-friendly usage and customization of angle, colors, border thickness, and radius. Use when asked for gradient borders, border glow, or the specific mask-composite border gradient snippet.---# CSS Border Gradient Skill## Workflow1. Confirm environment (plain CSS vs Tailwind) and gather missing specs (border radius, thickness, angle, colors).2. Provide the baseline snippet and a short usage checklist.3. Offer focused tweaks only (change angle, colors, thickness, radius) and avoid redesigning the component.## Baseline snippet```css.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```html<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?

Frequently asked questions