CSS Border Gradient
FreeEnhance your web surfaces with subtle gradient borders.
Free · Opens the source repo
What CSS Border Gradient does
The CSS Border Gradient skill provides a method for applying refined gradient borders to various web UI elements. This skill is particularly useful for developers and designers looking to elevate the visual appeal of components such as cards, pricing panels, navigation bars, modals, buttons, and hero surfaces. By using this skill, you can achieve a premium look without overwhelming your design with flashy effects. The gradients are designed to be subtle, ensuring that they enhance rather than distract from the content.
This skill offers two primary CSS patterns: a simple gradient border for surfaces with solid or translucent fills, and a masked gradient border for more complex backgrounds. The simple pattern allows you to easily create a gradient border with a specified width, radius, and angle, while the masked pattern ensures that existing backgrounds are preserved. Both patterns are customizable, allowing you to adjust colors and opacities to fit your design needs.
Additionally, the skill includes guidance on best practices for using gradient borders effectively. It emphasizes the importance of maintaining a balance between the border and the content, suggesting that borders should frame elements without competing for attention. The skill also provides quick checks to ensure proper implementation, such as avoiding double borders and ensuring accessibility in focus states.
Overall, this skill is ideal for web developers and designers who want to add a touch of elegance to their UI components without resorting to overly bright or animated gradients. Its straightforward implementation and clear guidelines make it a valuable addition to any design toolkit.
When to use it
Use this skill when you want to add a premium edge to UI components like cards and buttons, especially when a flat border feels too plain.
When not to use it
Avoid this skill if your design requires bold, animated, or highly saturated borders, as this skill emphasizes subtlety and refinement.
What you can build with it
Enhancing Pricing Panels
Use gradient borders to give pricing panels a more premium appearance, making them stand out without being overly flashy.
Refining Hero Sections
Apply subtle gradient borders to hero sections to create a refined edge that complements the overall design.
Improving Modal Dialogs
Use this skill to add a gradient border to modal dialogs, enhancing their visual appeal while keeping the focus on the content.
How to install CSS Border Gradient
View source1. Install with the skills CLI
npx skills add mengto/skills/css-border-gradient --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by mengtoBorder Gradients
Use When
- A surface needs a more premium edge than a flat
border. - Dark glass, pricing, hero, modal, or feature-card UI feels too plain.
- A hover or focus state needs a quiet brand accent.
Defaults
- Width:
1px; use2pxonly for large hero cards or active states. - Radius: inherit the parent radius.
- Angle:
135degor160deg. - Stops: neutral highlight, one brand accent, neutral fade.
- Opacity: keep most stops below
0.4; subtle beats shiny.
Simple CSS Pattern
Use this when the surface has a solid or translucent fill.
.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;
}
<div class="gradient-border">
...
</div>
Masked Pattern
Use this when the surface already has a complex background that should not be overwritten.
.gradient-border-mask {
position: relative;
border-radius: 20px;
}
.gradient-border-mask::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(
145deg,
rgba(255, 255, 255, 0.34),
rgba(125, 92, 255, 0.36) 45%,
rgba(255, 255, 255, 0.08)
);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
Tailwind Shortcut
Use arbitrary properties for one-off surfaces.
<div class="rounded-2xl border border-transparent [background:linear-gradient(rgba(10,14,24,.72),rgba(10,14,24,.72))_padding-box,linear-gradient(135deg,rgba(255,255,255,.34),rgba(125,92,255,.36),rgba(255,255,255,.08))_border-box]">
...
</div>
Taste Rules
- Apply to one hierarchy level at a time: primary card, active tab, selected plan, or hero panel.
- Do not use rainbow borders, full-saturation neon, or animated gradients by default.
- Keep the border quieter than the content. It should frame, not compete.
- Pair with restrained depth: a soft shadow or inner highlight is enough.
- Check light and dark themes separately; the same alpha rarely works for both.
Quick Checks
- No double border from an existing
border-color. - Radius matches the surface exactly.
- The gradient is visible at normal zoom but barely noticeable when scanning.
- Focus states remain accessible and do not rely only on the gradient.
Frequently asked questions about CSS Border Gradient
Similar skills
Penpot UI/UX Design
Create professional UI/UX designs in Penpot with ease.
UX Theming
Streamline your VS Code theming process with best practices.
Wireframe
Create low-fidelity UI wireframes in SVG format.
Waitlist Page
Create a clean, focused pre-launch landing page.
Hallmark
Design skill for creating unique, structured UIs.
UI Styling
Create beautiful, accessible user interfaces effortlessly.