Accordion Style 4 - Frosted Glass

Pro

Accordion of translucent, blurred panels over a dotted background with soft shapes.

Shadcn Accordion Style 4 component

Component data

ID
accordion/accordion-style-4
Access
pro
Created
Oct 30, 2026
Type
example
Libraries
Radix UI, Base UI, React Aria

Accordion Style 4 component design & features

Items use a semi-transparent background with backdrop blur, sitting over a dotted grid and two blurred grey shapes so the frosted effect is visible. The open item becomes slightly more opaque.

Use frosted panels on showcase or marketing surfaces where there is texture behind the component.