Iridescent 3D Neumorphic Button

This is an Iridescent 3D Neumorphic Button. It pushes CSS styling to the limit, using stacked gradients, oklch color spaces, and advanced blend modes to create a button that feels like a piece of polished, translucent hardware. Its function is to serve as a high-fidelity “Hero” element, delivering a tactile, light-responsive experience that feels alive under the cursor.

Specs

• Weight: ~3 KB (Zero JavaScript).
• Performance: GPU-optimized. Heavy reliance on box-shadow and filter: blur(), which modern browsers handle well. However, stacking many blurred pseudo-elements may impact performance on older mobile hardware.
• Theming / Customization: Highly flexible. Colors are handled through oklch color math, which provides better gamut and perceived lightness compared to traditional RGB/HSL.
• Responsiveness: Scales with font-size. Because the button is built using em units relative to the font-size, scaling the entire component is as easy as adjusting a single CSS variable.
• Graceful Degradation: The button maintains its shape and functional state even in browsers without oklch or advanced blending, though the iridescent shimmer will be absent.

Anatomy

The component uses a “Proxy Stack” pattern, where multiple invisible layers are animated to create the final render.

• HTML (The Skeleton): A standard <button> element with a single internal .drop-shadow span for secondary lighting.
• CSS (The Skin): Uses the ::before and ::after pseudo-elements of both the button and the inner span to create five distinct layers of lighting, iridescence, and shadows.
• JS (The Nervous System): Completely absent. The “shine” state is handled entirely via CSS :hover and :active triggers.

Logic

The standout logic is “Layered Radiance Masking”.

& .drop-shadow::after {
  mask: radial-gradient(closest-side, hsl(0, 0%, 100%) 0%, ... hsla(0, 0%, 100%, 0) 100%);
  filter: blur(8px) brightness(1.2) contrast(1.05);
  mix-blend-mode: lighten;
}

Instead of simply setting a color, the button uses radial-gradient masks combined with mix-blend-mode: lighten. This causes the iridescent colors beneath to bleed into the button’s background in specific, shaped patterns. When the button is hovered, the translate and scale of these masked layers are subtly shifted, making the light reflections appear to “sweep” across the surface of the button like a physical highlight.

Feel

Luxurious and heavy. The button doesn’t just change color; it physically reacts to the light. The combination of deep inset shadows (creating the “trench”) and the external outer-shadow (lifting it off the background) makes it feel like a physical, convex object. The iridescent shimmer gives it a premium, futuristic texture, making the simple action of clicking feel like engaging a high-quality control.