Graphite Panel Glassmorphism CSS

Graphite Panel is a dark translucent graphite pane with 24px backdrop blur.

backdrop-filter

Glass Surface

Output

Copy-ready CSS

Pure CSS

background: rgba(17, 24, 39, 0.2);
backdrop-filter: blur(24px) saturate(170%);
-webkit-backdrop-filter: blur(24px) saturate(170%);
border: 1px solid rgba(100, 116, 139, 0.32);
border-radius: 28px;
box-shadow: 0 24px 70px -32px rgba(0, 0, 0, 0.32);

Tailwind v4

bg-[rgba(17,24,39,0.2)] backdrop-blur-[24px] backdrop-saturate-[170%] rounded-[28px] border border-[rgba(100,116,139,0.32)] shadow-[0_24px_70px_-32px_rgba(0,0,0,0.32)]

Try it in the generator

When to use it

Graphite Panel is a dark glassmorphism preset for translucent cards, overlays, navigation panels, and dashboard surfaces. It combines 24px of blur with 170% saturation, a 20% background tint, and a 28px radius. Graphite Panel is a dark translucent graphite pane with 24px backdrop blur. The style includes both backdrop-filter and -webkit-backdrop-filter declarations so the visual is portable across modern browsers. A soft shadow is included so the pane separates from busy color behind it. Use it over a colorful or image-heavy background where the glass effect can catch light, then tune opacity, border strength, blur, and radius in the generator before copying the final CSS.

Hexpedia