FancyUI
Saved GitHub Get started
Button — lapping gradient beam — preview

Button — lapping gradient beam

FancyUI FANCYUI

A multi-hue beam laps a dark button and lights its face from the edge.

#glow#iridescent#ambient

Open docs

Use in FancyUI

Type
Interaction
Interaction
Ambient
Style
Glow, Iridescent
Code availability
Open source

Why it works

A conic beam runs around the border and a blurred copy spills inward, so the face looks lit by its own edge rather than outlined. The colours are an array, so the beam can carry a brand ramp instead of a single hue.

When to use it

One generate, upgrade or launch action on a dark surface.

Things to watch

Always a dark button — there is no light-theme branch. Reduced motion stops the beam at a fixed angle. Its `--gb-*` variables inherit into the label.

Implementation clues

  • @property --gb-angle
  • conic beam masked to the border
  • blurred inner glow
  • colors[] → gradient stops