AutoGineer
Generated banner for CSS Border Gradient
Generated logo for CSS Border Gradient

CSS Border Gradient

Meng ToCommunityCreated by Meng To

  • Skill
  • Guidelines
  • Software development
  • MIT
  • Medium risk
Download ZIP

From the author

Apply subtle gradient-border treatments for premium web surfaces. Use when cards, pricing panels, nav bars, modals, buttons, or hero surfaces need a refined edge highlight without a loud glow.
— the description by Meng To

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a set of design principles and technical implementation patterns for applying refined gradient borders to web surfaces. It focuses on achieving a premium, high-end aesthetic for elements like cards, modals, and navigation bars by emphasizing subtlety over high-contrast or neon effects. The guide includes specific CSS techniques for both standard and complex background scenarios, as well as a Tailwind CSS shortcut for rapid implementation.

What it does

  • Provides CSS patterns for applying gradient borders using background-clip and mask-composite techniques.
  • Offers a Tailwind CSS utility class approach for one-off surface styling.
  • Defines design constraints for border width, opacity, and color stops to ensure a professional look.
  • Outlines best practices for maintaining visual hierarchy and avoiding over-styling.
  • Includes a checklist for verifying accessibility and visual consistency across themes.

When to use it

  • When you need to elevate the visual quality of cards, pricing panels, or hero sections.
  • When a standard flat border feels too plain or lacks depth.
  • When you want to add a quiet brand accent to focus or hover states.
  • When working on dark-themed interfaces that benefit from subtle edge highlights.

Advantages

  • Promotes a consistent, premium design language across UI components.
  • Prevents common design pitfalls like overly bright or distracting borders.
  • Provides flexible implementation methods for both standard and complex backgrounds.
  • Encourages accessibility-first design by reminding users not to rely solely on gradients for focus states.

Usage examples

“How can I add a subtle gradient border to my pricing card component?”
The agent provides the CSS pattern using background-clip or the Tailwind shortcut, ensuring the border remains subtle with low-opacity color stops.
“What are the design rules for using gradient borders on a hero section?”
The agent outlines the recommended width, angle, and opacity settings to ensure the border frames the content without competing for attention.

Install

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/mengto/css-border-gradient/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip css-border-gradient.zip -d .agents/skills

Documentation by Meng To

Border 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; use 2px only for large hero cards or active states.

  • Radius: inherit the parent radius.

  • Angle: 135deg or 160deg.

  • 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.

Files

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

What our scanner noticed· Medium risk

  • Large base64-encoded blobs

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Meng To
Publisher
Meng To (Community)
Source
MengTo/Skills · agent-skills/web-design/css-border-gradient · commit 5ea1661
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Meng To.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download css-border-gradient.zip