Gradient Border Card

Card with an animated gradient border stroke on dark background

Surfaces

webgoogle-apps-script-webmcp-apps

Live preview

Fields

Field	Type
title	string	optional
content	string	optional
colours	array of hex strings (optional, gradient stops)	optional
bg	string (optional, card background)	optional
angle	number (optional, gradient angle degrees)	optional
padding	string	optional
radius	string	optional

Example payload

{
  "type": "gradient_border_card"
}

ARD catalog entry

{
  "identifier": "urn:air:a2uicatalog.ai:atom:gradient_border_card",
  "displayName": "Gradient Border Card",
  "type": "application/vnd.a2ui.atom+json",
  "url": "https://a2uicatalog.ai/atoms/gradient_border_card",
  "capabilities": [
    "web",
    "google-apps-script-web",
    "mcp-apps"
  ],
  "description": "Card with an animated gradient border stroke on dark background",
  "representativeQueries": [
    "show a animated gradient border card",
    "card with an animated gradient border stroke on dark background",
    "render a gradient border card"
  ]
}

← Full ARD catalog

Deploy your own Google Apps Script renderer

The renderer is an open-source Google Apps Script web app. Deploy your own instance in 4 commands — you own the URL, no dependency on the demo endpoint.

git clone https://github.com/a2uicatalog/a2ui
cd a2ui/apps-script-surface/gas-wired-renderer
clasp push && clasp deploy

Full deploy guide →