Guide · Agent skill
How to use the CSS Border Gradient agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The css-border-gradient skill is a set of instructions that teaches an AI agent how to give web interface elements a refined gradient edge instead of a flat one-colour border. It is aimed at front-end developers, designers handing off styles to code, and anyone using an agent to build dark-glass or hero interfaces. After reading this guide you will know what the skill changes, how to install it, how to ask for it in plain language, and what to check in the output.
CSS Border GradientMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Download the css-border-gradient ZIP file from this page.
- 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use, or into your project's .claude/skills/ folder.
- 3Or upload in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the skill.
- 4Describe the surface. Ask for a gradient border on a specific element, such as a card, modal, button or hero panel.
- 5Review the output. Check the border against the quick checks: no double border, matching radius, and visible focus states.
- 6Check both themes. View the result in light and dark themes and adjust opacity if the same alpha does not suit both.
What does the css-border-gradient skill make the agent do?
Once installed, the agent can add gradient edges to web elements such as cards, pricing panels, nav bars, modals, buttons and hero sections, in place of a flat one-colour border. The skill supplies CSS and Tailwind patterns, default values for width, angle and opacity, and design rules that keep the effect subtle rather than flashy.
The skill is guidance for writing front-end code. It does not run anything itself.
- Default border width is 1px; 2px is reserved for large hero cards or active states.
- Default angle is 135deg or 160deg.
- Most gradient stops stay below 0.4 opacity.
- Radius is inherited from the parent surface.
How do you install the css-border-gradient skill?
Download the ZIP file from this page and unzip it into one of these locations:
For a personal setup available across projects, unzip it into ~/.claude/skills/.
For a single project, unzip it into the project's .claude/skills/ folder.
Alternatively, upload the skill in the Claude apps under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/
- Project: .claude/skills/ inside your project folder
- Claude apps: Settings → Capabilities → Skills, then upload
How do you trigger the skill with a natural request?
You do not need a special command. Describe the surface you want to style and mention the edge treatment. The skill's description covers cards, pricing panels, nav bars, modals, buttons and hero surfaces that need a refined edge highlight without a loud glow.
The demo prompts in the package name the skill directly with $css-border-gradient, which is a clear way to make sure it is used.
- Add a refined gradient border to the pricing cards in index.html, keeping it subtle.
- Use $css-border-gradient to give the modal a premium edge highlight, not a glow.
- Style this hero panel with a gradient border on a dark glass background.
Use $css-border-gradient to give the primary card a subtle gradient border.Which CSS pattern does the skill use?
For a surface with a solid or translucent fill, the skill uses a background layering approach. A padding-box layer carries the fill colour and a border-box layer carries the gradient, with a transparent 1px border so the gradient shows through the edge.
When the surface already has a complex background that should not be overwritten, the skill uses a masked pseudo-element instead. A ::before layer with padding: 1px and a mask composite draws only the border ring.
- Simple pattern: use for solid or translucent fills.
- Masked pattern: use when the existing background must stay untouched.
- Tailwind shortcut: arbitrary properties for one-off surfaces.
.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;
}What design rules keep the border subtle?
The skill's taste rules favour restraint. Apply the effect to one level of hierarchy at a time, such as the primary card, active tab, selected plan or hero panel. Keep the border quieter than the content, and pair it with a soft shadow or inner highlight rather than a strong glow.
Check light and dark themes separately, because the same alpha value rarely works for both.
- Do not use rainbow borders, full-saturation neon or animated gradients by default.
- Use a soft shadow or inner highlight for depth, not a heavy effect.
- Test the gradient in both light and dark themes.
What should you check after the agent applies it?
The skill lists quick checks to run on the result. Make sure there is no double border caused by an existing border-color, that the radius matches the surface exactly, and that the gradient is visible at normal zoom but hardly noticeable when scanning the page.
Focus states must remain accessible and must not rely only on the gradient. The skill gives general reminders here, so a formal accessibility audit is still needed where compliance matters.
- Remove any existing border-color to avoid a double border.
- Match the border-radius to the surface.
- Confirm focus states are visible without the gradient.
What people use it for
- Adding a quiet gradient edge to a pricing card so the selected plan stands out.
- Giving a dashboard modal a refined edge that frames it without a glow.
- Styling a dark-glass hero panel on a landing page.
- Adding a subtle brand-accent edge to a button hover or focus state.
- Reproducing the visual style of the included demo/index.html reference page.
Frequently asked questions
How do I install the css-border-gradient skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. You can also upload it in the Claude apps under Settings → Capabilities → Skills.
Does the css-border-gradient skill require anything else to run?
The skill lists no requirements. It does not run scripts and does not use the network. It is guidance that the agent follows while writing front-end code.
Is the css-border-gradient skill free to use?
The skill is published under the MIT licence. Check the licence file in the package for the full terms before using it in a commercial product.
Why is my gradient border showing a double edge?
This usually happens when an existing border-color is still set on the element. The skill's quick checks say to remove it so only the gradient border remains.
Can the skill make rainbow or animated borders?
Not by default. The skill explicitly discourages rainbow borders, full-saturation neon and animated gradients, so you would need to ask for them specifically and accept that they go against its guidance.
How does this compare with writing the CSS by hand?
The skill gives you tested-looking patterns, default values and design rules in one place, so the agent starts from consistent settings. It does not replace an accessibility audit or a review of your own design system.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a front-end developer or designer who wants refined, restrained gradient edges on cards, buttons, modals and hero surfaces, and you work with an AI agent. Pick something else if you need rainbow, neon or animated borders, or if your team needs a full accessibility audit beyond the skill's general focus-state reminders.
Download the skill