Convex glass gradient
Icon button with a vertical gradient background and sub-pixel inset highlights that simulate a convex glass surface. Tailwind v4 bg-linear-to-b syntax.
Dependencies
Install the required packages before using this component.
Notes
The gradient (lighter top, darker bottom) combined with the top 0.5px inset creates the illusion of a convex surface catching light from above. Without the gradient the top highlight looks painted on rather than physically correct.
Sub-pixel values (0.5px) produce razor-sharp specular lines on high-DPI screens. On 1x displays they round to 1px; the effect still works but is slightly softer.
The bottom anchor (inset 0 -0.5px 0 0 teal-600) pins a dark edge that grounds the button. Without it the gradient + top glow combination looks like the button is floating with no base.