What is the css-border-gradient skill?
css-border-gradient is a skill in boraoztunc/skills that gives an agent two CSS patterns, a padding-box and border-box layered background, or a masked pseudo-element, for a quiet gradient edge on cards, pricing panels, nav bars and modals. It sets defaults for width, angle and opacity so the border frames content instead of competing with it.
css-border-gradient is one skill in boraoztunc/skills. It tells an agent when a surface needs a more premium edge than a flat border, such as a pricing panel, hero card, modal or hover state, and hands it two CSS patterns for that edge.
The first pattern layers a solid background in the padding box with a gradient in the border box. The second masks a gradient pseudo-element around the surface when the background underneath is already complex and should not be overwritten.
What changes in the agent's output
- The agent reaches for a 1px or 2px gradient border with neutral-accent-neutral stops instead of a flat solid border color.
- Dark glass, pricing and hero surfaces get a quiet edge highlight rather than a bright glow or animated rainbow border.
- Masked borders use both mask and -webkit-mask with matching composite keywords, so the edge renders in every engine instead of covering the surface.
- Focus and hover states keep an accessible outline that does not depend only on the gradient being visible.
Taste rules it enforces
The skill caps most gradient stops below 0.4 opacity and applies the treatment to one hierarchy level at a time, such as the active tab or selected plan, rather than every card on a page.
Who the css-border-gradient skill is for
Best for
- Pricing pages, hero panels and modals that need one refined accent edge.
- Dark or glass UI where a flat border reads as too plain against the background.
- Hover and focus states that want a brand accent without a loud effect.
Not for
- If your job is mostly enforcing one minimalist editorial style across a whole page, the minimalist skill is the better fit for that.
- If your job is mostly finding a CSS property that renders but has no visible effect, the CSS Noop Checker is the better fit for that.
- When the task is tuning exact radius and shadow values across many components, the better-ui skill is the better fit for that.
Use it with UiChemy
A gradient border is a styling detail on top of an existing layout. Once the card or modal is styled, UiChemy AI to WordPress brings that front-end build into an editable WordPress page.
How to install CSS Border Gradient Skill for AI Coding Agents
mkdir -p ~/.claude/skills/css-border-gradient && curl -o ~/.claude/skills/css-border-gradient/SKILL.md https://raw.githubusercontent.com/boraoztunc/skills/main/css-border-gradient/SKILL.mdCreate the skill path
Run
mkdir -p ~/.claude/skills/css-border-gradientso the agent has a place to store SKILL.md.Download the SKILL.md
Run the curl command above to copy css-border-gradient's SKILL.md from boraoztunc/skills into that path.
Or clone the whole set
Run
git clone https://github.com/boraoztunc/skills.gitand symlink css-border-gradient into ~/.claude/skills if you want the full collection.
Check that it loaded
Ask the agent for a gradient border on a pricing card and check that the output uses the padding-box and border-box background pattern or the masked pseudo-element, not a flat border-color.
Key features
- Padding-box and border-box layeringA solid fill in the padding box paired with a gradient in the border box produces a clean gradient edge on surfaces with a flat or translucent fill.
- Masked pseudo-element patternAn ::before element with a padding-based mask renders a gradient ring around surfaces that already have a complex background the agent should not overwrite.
- Cross-engine mask propertiesThe skill requires both the unprefixed mask and -webkit-mask properties with matching composite keywords, xor for WebKit and exclude for the standard property, so the ring renders everywhere.
- Default angle and stop guidanceA 135deg or 160deg angle with a neutral, accent, neutral stop sequence is the starting point instead of a full-saturation rainbow sweep.
- Opacity ceilingMost gradient stops stay under 0.4 opacity, keeping the border quieter than the content it frames.
- Width defaults by context1px is the default width, with 2px reserved for large hero cards or active states, so borders do not overpower smaller components.
- Tailwind arbitrary-property shortcutA one-line Tailwind class using arbitrary background properties covers one-off surfaces without writing a separate CSS rule.
- Radius inheritanceThe border radius is set to inherit the parent surface's radius so the gradient edge lines up exactly with the card shape.
- Light and dark theme checkThe skill calls out checking the gradient in both themes separately, since the same alpha values rarely read the same way in light and dark.
Frequently asked questions
What is the css-border-gradient skill?
It is a skill in boraoztunc/skills that gives an agent two CSS patterns for a subtle gradient border edge, one using layered padding-box and border-box backgrounds, the other a masked pseudo-element, plus taste rules for width, angle and opacity.
How do I install the css-border-gradient skill?
Download its SKILL.md into a local skills path with curl, or clone the full boraoztunc/skills repository and symlink css-border-gradient into your agent's skills setup. Either route works without a package manager or build step.
When should an agent use a masked gradient border instead of the simple pattern?
The masked pseudo-element pattern applies when the surface already has a complex background, such as an image or existing gradient fill, that a padding-box overlay would otherwise cover or replace.
Why does the masked border need both mask and -webkit-mask?
Mask-composite needs layers declared on the unprefixed mask property to have something to composite against. Shipping only the prefixed version leaves spec-compliant engines with no mask, so the pseudo-element covers the whole surface instead of forming a ring.
How subtle should a CSS gradient border be?
The skill keeps most gradient stops under 0.4 opacity and limits the treatment to one hierarchy level per screen, such as a selected plan or active tab, so the border frames the content rather than competing with it.
Does the css-border-gradient skill work with Tailwind?
Yes. It includes a one-line Tailwind pattern using arbitrary background properties that reproduces the same padding-box and border-box layering for a single surface without a separate CSS rule or a plugin, so a utility-first project keeps one markup style.
Does a gradient border affect focus accessibility?
The skill calls for focus states that stay visible without relying only on the gradient, since the gradient can be too subtle on its own to carry a clear focus signal for keyboard users.