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

demo/source.json

{
  "version": 1,
  "provider": "Neuform",
  "synced_at": "2026-07-18T06:40:46.791Z",
  "skill": {
    "id": "css-border-gradient",
    "label": "Border Gradients",
    "usage_count": 13807,
    "url": "https://neuform.ai/skill/css-border-gradient"
  },
  "ranking": {
    "position": 1,
    "order": [
      "view_count desc",
      "community_favorite_count desc",
      "relation_created_at desc"
    ],
    "visible_design_count": 1
  },
  "design": {
    "id": "40dc5a34-31a3-4490-8fe4-ee4557058230",
    "slug": "kiwi-floral-artisan-botanical-design-1",
    "title": "Kiwi Floral | Artisan Botanical Design",
    "url": "https://neuform.ai/pages/kiwi-floral-artisan-botanical-design-1/index.html",
    "view_count": 2154,
    "favorite_count": 47,
    "remix_count": 27
  },
  "html": {
    "original_sha256": "87aae46219f8e80319e272031226e6b29de1d610c8ef58385c801a549649b97f",
    "bundled_sha256": "25e42ba4831fad7141ec00170a74d6539ca8ca5a288fcdcc6b35b7ea0d2eb548",
    "runtime_dependencies": [
      "https://fonts.googleapis.com",
      "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Playfair+Display:ital,wght@0,400;0,500;1,400&display=swap",
      "https://fonts.gstatic.com"
    ],
    "hardened_sha256": "cc4b0b15268710a9e9728443fdf7536cbf0aee240d37e3062b62fb90aa5c48b7",
    "sandboxed_sha256": "4559d22599d5ed733eb14ba074e37de12e8db297571b70be93b898a347274658",
    "security_profile": "sandboxed-srcdoc-v1"
  },
  "assets": {
    "preview": "assets/source-preview.jpg",
    "bundled": [
      {
        "bytes": 536390,
        "file": "assets/page-01-65695f80-23f9-46ee-8487-cbb6c93cc48b-3840w.webp",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/65695f80-23f9-46ee-8487-cbb6c93cc48b_3840w.webp"
      },
      {
        "bytes": 989406,
        "file": "assets/page-02-724142aa-44a6-48d3-9cf3-761e00d05b78-1600w.jpg",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/724142aa-44a6-48d3-9cf3-761e00d05b78_1600w.jpg"
      },
      {
        "bytes": 44753,
        "file": "assets/page-03-4734259a-bad7-422f-981e-ce01e79184f2-1600w.jpg",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4734259a-bad7-422f-981e-ce01e79184f2_1600w.jpg"
      },
      {
        "bytes": 728581,
        "file": "assets/page-04-005600e5-f6ab-4e59-bc86-eaeb02797dfa-1600w.jpg",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/005600e5-f6ab-4e59-bc86-eaeb02797dfa_1600w.jpg"
      },
      {
        "bytes": 85289,
        "file": "assets/page-05-e534354d-c5f2-4399-a1d9-2f50338e8c47-1600w.jpg",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/e534354d-c5f2-4399-a1d9-2f50338e8c47_1600w.jpg"
      },
      {
        "bytes": 201962,
        "file": "assets/page-06-fb6415fd-bf4d-4ccf-8e9d-7ab445e99207-1600w.jpg",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/fb6415fd-bf4d-4ccf-8e9d-7ab445e99207_1600w.jpg"
      },
      {
        "bytes": 407279,
        "file": "../../../../assets/runtime/runtime-ccc8894b3418-runtime.js",
        "original_url": "https://cdn.tailwindcss.com/",
        "kind": "runtime-script",
        "sha256": "176e894661aa9cdc9a5cba6c720044cbbf7b8bd80d1c9a142a7c24b1b6c50d15"
      },
      {
        "bytes": 42667,
        "file": "../../../../assets/runtime/runtime-689ca8dda44c-scrolltrigger-min.js",
        "original_url": "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js",
        "kind": "runtime-script",
        "sha256": "65f6c13748b0c8d8f9eabd0373a130ac293b3f16bf34aaa946d953980372b932"
      },
      {
        "bytes": 71520,
        "file": "../../../../assets/runtime/runtime-027051effa47-gsap-min.js",
        "original_url": "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js",
        "kind": "runtime-script",
        "sha256": "efc85c7eb141819717cda0033484a84b1c890d13b02e355a2fec79d424b20e7a"
      },
      {
        "bytes": 22003,
        "file": "../../../../assets/runtime/runtime-163ebd087cfc-iconify-icon-min.js",
        "original_url": "https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js",
        "kind": "runtime-script",
        "sha256": "851bed7af266f96a0be3edf9918daab48d8da4ce17c46040511bae450caf3dd6"
      }
    ],
    "skipped": []
  }
}

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