Say Hi

UI Recipes

CSS Recipes

A growing collection of UI patterns, effects, and components — live demos with code.

All Recipes

Glass Morphism

Frosted glass effect with backdrop-filter: blur(). Light, default, and heavy blur variants with gradient borders and layered depth.

backdrop-filter blur translucent

Neon Glow

CSS text and box glow using layered text-shadow and box-shadow. Includes animated pulse variant.

text-shadow box-shadow animation

Card Effects

Interactive card hover effects using transform, filter, and pseudo-elements. Lift, scale, glow border, and shimmer.

hover transform transition

Neumorphism

Soft UI effect with inset and outset shadows. Pressed and raised states for a subtle 3D look.

box-shadow inset soft

Neobrutalism

Bold borders, harsh box-shadows, high-contrast color blocks. Maximalist, in-your-face design.

borders shadow bold

Loading Spinners

CSS-only loading animations. Dots, rings, pulsars, and progress bars — all with @keyframes.

animation keyframes loading

Liquid Glass

Apple-inspired frosted glass panels with backdrop-filter blur, layered depth, and subtle reflections. visionOS-style glass UI.

backdrop-filter frosted visionOS blur