Graphite Pill Glassmorphism CSS

Graphite Pill is a dark translucent graphite pane with 16px backdrop blur.

backdrop-filter

Glass Surface

Output

Copy-ready CSS

Pure CSS

background: rgba(17, 24, 39, 0.18);
backdrop-filter: blur(16px) saturate(135%);
-webkit-backdrop-filter: blur(16px) saturate(135%);
border: 1px solid rgba(100, 116, 139, 0.3);
border-radius: 999px;

Tailwind v4

bg-[rgba(17,24,39,0.18)] backdrop-blur-[16px] backdrop-saturate-[135%] rounded-[999px] border border-[rgba(100,116,139,0.3)]  shadow-none

Try it in the generator

When to use it

Graphite Pill is a dark glassmorphism preset for translucent cards, overlays, navigation panels, and dashboard surfaces. It combines 16px of blur with 135% saturation, a 18% background tint, and a 999px radius. Graphite Pill is a dark translucent graphite pane with 16px backdrop blur. The style includes both backdrop-filter and -webkit-backdrop-filter declarations so the visual is portable across modern browsers. The shadow is removed, which keeps the treatment closer to a lightweight control or pill. 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.

Explore more