/* The neon grid floor of the stage, drawn as two repeating line gradients on a plane tipped back with perspective. */
@utility nn-grid{background:linear-gradient(#e879f9 2px,transparent 2px) 0 0/64px 44px,linear-gradient(90deg,#e879f9 2px,transparent 2px) 0 0/64px 44px}
About this set
Neon 3D for dark interfaces, in three variants. The synthwave stage is an event hero with a striped sunset sun, a glowing grid floor tipped back with perspective, an extruded neon title and a cyan Get tickets button that sinks when pressed. The layered card is a Night Pass membership card whose badge, price, list and button sit at different depths with translateZ; on hover or keyboard focus it tilts to a fixed angle, so the layers separate. The wireframe cube is a brand card with a cube drawn from six transparent faces with glowing edges, which turns a quarter when the card is hovered or a link inside it is focused. Nothing moves on its own: every movement is a transition into a hover or focus state, and under prefers-reduced-motion those states apply without the transition. The glows are box-shadows and text-shadows in the accent colours, and the text colours are checked for contrast on the near-black ground. Use the stage for event and launch pages, the card for pricing and the cube as a logo mark beside a product link.
What’s included
Perspective grid floor and striped sun behind an extruded neon title
Layered membership card that tilts on hover and keyboard focus
Glowing wireframe cube that turns a quarter on hover or focus
No continuous animation; nothing moves until hovered or focused
Bootstrap version runs in data-bs-theme="dark"
Accessibility
Headings, prices and links are real text with contrast checked on the dark ground, and the sun, grid and cube are aria-hidden decoration. Focus inside the layered card or the brand card triggers the same tilt and turn as hover, and every link and button shows a 3px cyan focus outline. Transitions are removed under prefers-reduced-motion.
Customise it
The neon colours are --nn-pink, --nn-magenta and --nn-cyan on .nn; the grid cell is the 64px by 44px background size on .nn-floor and its angle the rotateX(64deg). Card depths are the --z values on each layer. In Tailwind the grid lives in the nn-grid utility and the rest in arbitrary values.
