UI Recipes
A growing collection of UI patterns, effects, and components — live demos with code.
Frosted glass effect with backdrop-filter: blur(). Light, default, and heavy blur variants with gradient borders and layered depth.
backdrop-filter: blur()
CSS text and box glow using layered text-shadow and box-shadow. Includes animated pulse variant.
text-shadow
box-shadow
Interactive card hover effects using transform, filter, and pseudo-elements. Lift, scale, glow border, and shimmer.
transform
filter
Soft UI effect with inset and outset shadows. Pressed and raised states for a subtle 3D look.
Bold borders, harsh box-shadows, high-contrast color blocks. Maximalist, in-your-face design.
CSS-only loading animations. Dots, rings, pulsars, and progress bars — all with @keyframes.
@keyframes
Apple-inspired frosted glass panels with backdrop-filter blur, layered depth, and subtle reflections. visionOS-style glass UI.
backdrop-filter