Radial top glow
Dark gradient CTA button with a radial top glow via Tailwind after: pseudo-element utilities. Common hero call-to-action on dark landing pages.
typescriptreactbuttontailwindgradient
Dependencies
Install the required packages before using this component.
Notes
The after: pseudo-element holds the radial glow independently from the background. Adjust the white glow opacity via the rgba value without touching the background gradient.
The ellipse is anchored at 50% 0% (top center). Changing the position shifts where the light source appears: 50% 100% for bottom glow, 0% 50% for a side glow.
inset 0 -2px 4px 0 at the bottom creates subtle darkening at the base, which grounds the button and prevents the top glow from looking like the whole button is glowing.