Button shimmer
Dark
Light
Ring on hover
Ring always on
Variant
Confirm
Secondary
Tertiary
Size
Medium, 32px
Small, 24px
Ring
Thickness
Offset
Direction
Sweep up
Sweep down
Clockwise
Duration
Color
Palette
Highlight
Text color
Custom
None
Color 1
Color 2
Color 3
Color 4
×
+ Add color 4
Highlight
Highlight, dark
Gradient, experimental
Blend
sRGB
OKLCH
OKLCH keeps transitions between colors vivid. sRGB can gray out where a dark highlight meets a bright color.
Angle
Band size
Stays seamless between 100 and 170 degrees. Larger bands slow the sweep and widen each streak.
Glow, preview only
Blur
Strength
Not in shimmer.scss. Drawn on ::before: a blurred copy of the gradient with the button cut out by a mask, so the blur spreads outward from the ring path. No extra elements.
CSS
Reset
Copy link
Copy CSS
Primary confirm
Merge
Primary confirm, split button (ring moves to the group)
Set to auto-merge
— live preview on gitlab-ui confirm primary tokens — nothing paints at rest
Color
Custom color