The Glass-Morphic Depth Input
The Glass-Morphic Depth Input
A 3D-styled input that looks like frosted glass sitting on a surface. It physically depresses (pushes in) when clicked.
Analysis
Description: Based on "Neumorphism" (Soft UI). The input looks like it is extruded from the background material. When focused, the shadows invert, making the input look like it has been pressed into the surface.
Uses:
Medical or Health-tech dashboards (clean, sterile look).
Smart Home control panels.
Modern SaaS landing pages.
Benefits:
Tactile Feedback: It mimics real-world button physics, making the UI feel responsive.
Visual Harmony: Because it uses the same color as the background, it reduces visual clutter.
Eye Comfort: Low contrast shadows are easier on the eyes than harsh black borders.
Technique Used:
Complex Box-Shadows: Using two shadows (one light, one dark) to create 3D volume.
Inset Shadows: Flipping the shadows to inset on focus creates the "pressed" illusion.
Border-Radius 50px: Creates the pill shape common in modern UI.