Hover the links: the pill catches up on a damped spring, and the specular highlight slides across it slightly late. That lag is the whole trick — without it the surface reads as a flat panel instead of glass.
Real backdrop blur and saturation, a lit inner edge, and a tint you set yourself. Put it over an image or a gradient and you will see the refraction; over a flat colour there is nothing to refract, which is true of every glass effect and worth knowing before you place it.
Links are an array with labels and destinations. Blur, saturation, tint, edge light, highlight strength, pill colour, spring stiffness, radius, height, spacing and font are all adjustable.
CSS and DOM only, no dependencies, nothing loaded from outside. Keyboard focus moves the pill too. Honours prefers-reduced-motion by snapping instead of springing. Free.
Hover the links: the pill catches up on a damped spring, and the specular highlight slides across it slightly late. That lag is the whole trick — without it the surface reads as a flat panel instead of glass.
Real backdrop blur and saturation, a lit inner edge, and a tint you set yourself. Put it over an image or a gradient and you will see the refraction; over a flat colour there is nothing to refract, which is true of every glass effect and worth knowing before you place it.
Links are an array with labels and destinations. Blur, saturation, tint, edge light, highlight strength, pill colour, spring stiffness, radius, height, spacing and font are all adjustable.
CSS and DOM only, no dependencies, nothing loaded from outside. Keyboard focus moves the pill too. Honours prefers-reduced-motion by snapping instead of springing. Free.
