css-border-gradient
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-gradientto the element. - Remove any existing
borderstyles. - 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 example2px). - Radius: change
border-radiusor thebefore: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?
More from mengto/skills
landing-page
Use when designing or rewriting a high-converting landing page (single-offer page) for SaaS/apps/services. Covers structure, layout patterns, conversion strategies, copywriting, SEO/AEO, and common pitfalls.
31gsap
Use when you need to add or debug professional web animations with GSAP (timelines, ScrollTrigger, stagger, transforms) in HTML/CSS/JS/React. Includes patterns for smooth motion, performance, and common pitfalls.
28globe-gl
Use when implementing globe.gl (Globe.GL) for 3D globe data visualization with WebGL/ThreeJS, including setup, data layers (points, arcs, polygons, labels), and integration patterns in plain HTML or React.
27progressive-blur
Create a layered CSS progressive blur (top or bottom) using multiple backdrop-filter masks for depth and softness. Use when asked for “progressive blur”, “gradient blur overlay”, or stepped blur masks that fade from an edge of the viewport.
27pricing-page
Use when designing or rewriting a high-converting SaaS pricing page (structure, plan design, copywriting, SEO/AEO, FAQs, layout patterns, experiments). Includes checklists, templates, and common pitfalls.
25matterjs
Use when implementing 2D physics interactions with Matter.js, including Engine/World setup, Render/Runner configuration, adding bodies and constraints, and scroll/interaction-friendly canvas scenes.
24