Panel with a CSS repeating dot, grid, or cross background pattern using background-image with radial-gradient or linear-gradient. No SVG, no JavaScript. Useful as a texture layer behind content in dark or light themes.
| Surface | Note |
|---|---|
| googlechat | background-image patterns may not render in Chat card containers |
| Field | Type | |
|---|---|---|
| variant | "dots" | "grid" | "cross" (optional, default "dots") | optional |
| title | string. Text heading overlaid on the pattern. | optional |
| body | string. Body text overlaid on the pattern (markdown inline supported). | optional |
| dot_color | string. Dot or line colour. Default "rgba(148,163,184,0.35)". | optional |
| background | string. Panel background fill. Default "#0d1525". | optional |
| spacing | integer. Grid cell size in px. Default 24. | optional |
| dot_size | integer. Dot radius in px (dots variant only). Default 1. | optional |
{
"type": "dot_grid_background"
}{
"identifier": "urn:air:a2uicatalog.ai:atom:dot_grid_background",
"displayName": "Dot Grid Background",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/dot_grid_background",
"capabilities": [
"web",
"meet-stage",
"pdf",
"apps-script-web"
],
"description": "Panel with a CSS repeating dot, grid, or cross background pattern using background-image with radial-gradient or linear-gradient. No SVG, no JavaScript. Useful as a texture layer behind content in dark or light themes.",
"representativeQueries": [
"show a CSS repeating dot or grid pattern panel background",
"panel with a css repeating dot, grid, or cross background pattern using background-image with radial",
"render a dot grid background"
]
}The renderer is open source. 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 apps-script-surface/gas-schema-renderer
clasp push && clasp deploy