Sep 1, 2025
0 views
A pure-CSS gradient border wrapper for Framer. Uses layered masks to “punch out” the center, leaving a crisp, GPU-friendly gradient ring around your content area. Fully configurable via color stops, angle, width, and radius.
//
Tags
Add to your Framer project and place on the canvas.
Set Colors (array of { color, position% }) to define the gradient.
Adjust Angle (0–360°), Border Width (px), and Radius (px).
Place content inside the component frame (the inner white panel).
For dark themes, change the inner panel color in code if needed.
Preset A (Subtle Duo): stops=[{#ff00cc,0},{#3333ff,100}], angle=45, width=4, radius=12
Preset B (Rainbow Ring): stops=[red,orange,yellow,green,blue,indigo,violet @ spaced 0–100], angle=90, width=6, radius=20
Preset C (Mono Glow): stops=[{#0ea5e9,0},{#22d3ee,100}], angle=135, width=2, radius=8
Gradient string from stops[] → linear-gradient(angle, color position, …).
Outer wrapper gets padding = borderWidth and the gradient background.
Two mask layers (content-box + full box) with xor/exclude create a hollow center, so only the border area shows the gradient.
Inner child fills remaining space as the actual content surface.
Prefer 2–4 color stops for minimal paint; more is fine for hero elements.
Gradients are cheap; large radii and wide borders are safe.
Avoid animating borderRadius or borderWidth every frame; prefer discrete transitions.
Modern Chromium/WebKit support -webkit-mask-composite: xor; mask-composite: exclude used as a standard fallback.
Firefox support for the exact composite semantics may vary; if you target older/strict Firefox environments, consider an SVG fallback.
Inner panel is hardcoded to white; change to a tokenized var if theming is required.
Decorative effect; set aria-hidden="true" on the wrapper if used purely as chrome.
Ensure inner content maintains sufficient contrast against the inner panel color.
No network calls; no storage.
No dangerouslySetInnerHTML / eval.
No device permissions.
Cleans up by default (no timers/listeners created).
Decorative effect; set aria-hidden="true" on the wrapper if used purely as chrome.
Ensure inner content maintains sufficient contrast against the inner panel color.
No network calls; no storage.
No dangerouslySetInnerHTML / eval.
No device permissions.
Cleans up by default (no timers/listeners created).
Effect pattern inspired by CSS mask-composite techniques.
Implementation & Framer adaptation by SecretoCho Design.
SecretoCho Design 2025
Provided “as is” for visual/UX purposes. Validate cross-browser behavior, accessibility, and performance for your project.
Stay ahead of the curve with insights into emerging visualization trends and technologies.