Frosted Glass Dark UI CSS Breadcrumb Component

A dark-mode frosted-glass breadcrumb: a translucent charcoal panel with backdrop blur over a moody gradient, hairline top-edge sheen, and cool accent links — the dark counterpart to the glassmorphism demo, tuned for modern dark dashboards and creative dark UIs.

Live DemoUpdated Jul 22, 2026

Plain CSSTailwind v4

Try it

Build interactive UI like this from scratch: 20 HTML, CSS & JavaScript projects

ZTM · JavaScript Web Projects · 30‑day money-back guarantee · Affiliate link

10% off at checkout with code

Check ZTM Course

The code

<nav class="bc-38" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Studio</a></li>
    <li><a href="#">Sessions</a></li>
    <li><a href="#">Mixes</a></li>
    <li><a href="#" aria-current="page">Midnight Set</a></li>
  </ol>
</nav>

<nav class="bc-38" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Studio</a></li>
    <li><a href="#">Sessions</a></li>
    <li><a href="#">Mixes</a></li>
    <li><a href="#" aria-current="page">Midnight Set</a></li>
  </ol>
</nav>

.bc-38 {
  width: 100%;
  min-height: 100vh;
  --accent: oklch(0.72 0.15 200);
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 48px 32px;
  display: flex;
  justify-content: center;
  background: radial-gradient(120% 140% at 20% 0%,oklch(0.32 0.09 280),oklch(0.14 0.03 260) 55%,oklch(0.1 0.02 240));
  align-items: center;
  justify-content: center;
}

.bc-38 * {
  box-sizing: border-box;
}

.bc-38 ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 11px 16px;
  border-radius: 15px;
  background: oklch(0.2 0.02 265/.55);
  border: 1px solid oklch(0.35 0.02 265/.5);
  border-bottom-color: oklch(0.08 0.01 265/.6);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 10px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12);
}

.bc-38 li {
  display: flex;
  align-items: center;
}

.bc-38 li + li::before {
  content: "›";
  margin: 0 9px;
  color: oklch(0.6 0.02 265);
}

.bc-38 a {
  padding: 5px 10px;
  border-radius: 9px;
  font: 500 14px/1 system-ui,sans-serif;
  color: oklch(0.82 0.02 265);
  text-decoration: none;
  transition: background-color .2s ease,color .2s ease;
}

.bc-38 a:hover {
  color: #fff;
  background: oklch(0.4 0.02 265/.5);
}

.bc-38 a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.bc-38 li[aria-current="page"] a {
  color: #fff;
  background: color-mix(in oklab,var(--accent) 26%,oklch(0.25 0.02 265));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}

@media (prefers-reduced-motion: reduce) {
  .bc-38 a {
    transition: none;
  }
}

.bc-38 {
  width: 100%;
  min-height: 100vh;
  --accent: oklch(0.72 0.15 200);
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 48px 32px;
  display: flex;
  justify-content: center;
  background: radial-gradient(120% 140% at 20% 0%,oklch(0.32 0.09 280),oklch(0.14 0.03 260) 55%,oklch(0.1 0.02 240));
  align-items: center;
  justify-content: center;
}

.bc-38 * {
  box-sizing: border-box;
}

.bc-38 ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 11px 16px;
  border-radius: 15px;
  background: oklch(0.2 0.02 265/.55);
  border: 1px solid oklch(0.35 0.02 265/.5);
  border-bottom-color: oklch(0.08 0.01 265/.6);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 10px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12);
}

.bc-38 li {
  display: flex;
  align-items: center;
}

.bc-38 li + li::before {
  content: "›";
  margin: 0 9px;
  color: oklch(0.6 0.02 265);
}

.bc-38 a {
  padding: 5px 10px;
  border-radius: 9px;
  font: 500 14px/1 system-ui,sans-serif;
  color: oklch(0.82 0.02 265);
  text-decoration: none;
  transition: background-color .2s ease,color .2s ease;
}

.bc-38 a:hover {
  color: #fff;
  background: oklch(0.4 0.02 265/.5);
}

.bc-38 a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.bc-38 li[aria-current="page"] a {
  color: #fff;
  background: color-mix(in oklab,var(--accent) 26%,oklch(0.25 0.02 265));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}

@media (prefers-reduced-motion: reduce) {
  .bc-38 a {
    transition: none;
  }
}

/* No JavaScript — dark translucent fill under blur(14px) saturate(160%) with a lit top rim; light text and a solid-ish current wash keep dark glass readable. */

/* No JavaScript — dark translucent fill under blur(14px) saturate(160%) with a lit top rim; light text and a solid-ish current wash keep dark glass readable. */

Here's a working CSS Breadcrumb from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Frosted Glass Dark UI CSS Breadcrumb Component
Source: https://codefronts.com/navigation/css-breadcrumbs/frosted-glass/

A dark-mode frosted-glass breadcrumb: a translucent charcoal panel with backdrop blur over a moody gradient, hairline top-edge sheen, and cool accent links — the dark counterpart to the glassmorphism demo, tuned for modern dark dashboards and creative dark UIs.
## HTML
```html
<nav class="bc-38" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Studio</a></li>
    <li><a href="#">Sessions</a></li>
    <li><a href="#">Mixes</a></li>
    <li><a href="#" aria-current="page">Midnight Set</a></li>
  </ol>
</nav>
```
## CSS
```css
.bc-38 {
  width: 100%;
  min-height: 100vh;
  --accent: oklch(0.72 0.15 200);
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 48px 32px;
  display: flex;
  justify-content: center;
  background: radial-gradient(120% 140% at 20% 0%,oklch(0.32 0.09 280),oklch(0.14 0.03 260) 55%,oklch(0.1 0.02 240));
  align-items: center;
  justify-content: center;
}

.bc-38 * {
  box-sizing: border-box;
}

.bc-38 ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 11px 16px;
  border-radius: 15px;
  background: oklch(0.2 0.02 265/.55);
  border: 1px solid oklch(0.35 0.02 265/.5);
  border-bottom-color: oklch(0.08 0.01 265/.6);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 10px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12);
}

.bc-38 li {
  display: flex;
  align-items: center;
}

.bc-38 li + li::before {
  content: "›";
  margin: 0 9px;
  color: oklch(0.6 0.02 265);
}

.bc-38 a {
  padding: 5px 10px;
  border-radius: 9px;
  font: 500 14px/1 system-ui,sans-serif;
  color: oklch(0.82 0.02 265);
  text-decoration: none;
  transition: background-color .2s ease,color .2s ease;
}

.bc-38 a:hover {
  color: #fff;
  background: oklch(0.4 0.02 265/.5);
}

.bc-38 a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.bc-38 li[aria-current="page"] a {
  color: #fff;
  background: color-mix(in oklab,var(--accent) 26%,oklch(0.25 0.02 265));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}

@media (prefers-reduced-motion: reduce) {
  .bc-38 a {
    transition: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — dark translucent fill under blur(14px) saturate(160%) with a lit top rim; light text and a solid-ish current wash keep dark glass readable. */
```

Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.

Here's a working CSS Breadcrumb from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Frosted Glass Dark UI CSS Breadcrumb Component
Source: https://codefronts.com/navigation/css-breadcrumbs/frosted-glass/

A dark-mode frosted-glass breadcrumb: a translucent charcoal panel with backdrop blur over a moody gradient, hairline top-edge sheen, and cool accent links — the dark counterpart to the glassmorphism demo, tuned for modern dark dashboards and creative dark UIs.
## HTML
```html
<nav class="bc-38" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Studio</a></li>
    <li><a href="#">Sessions</a></li>
    <li><a href="#">Mixes</a></li>
    <li><a href="#" aria-current="page">Midnight Set</a></li>
  </ol>
</nav>
```
## CSS
```css
.bc-38 {
  width: 100%;
  min-height: 100vh;
  --accent: oklch(0.72 0.15 200);
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 48px 32px;
  display: flex;
  justify-content: center;
  background: radial-gradient(120% 140% at 20% 0%,oklch(0.32 0.09 280),oklch(0.14 0.03 260) 55%,oklch(0.1 0.02 240));
  align-items: center;
  justify-content: center;
}

.bc-38 * {
  box-sizing: border-box;
}

.bc-38 ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 11px 16px;
  border-radius: 15px;
  background: oklch(0.2 0.02 265/.55);
  border: 1px solid oklch(0.35 0.02 265/.5);
  border-bottom-color: oklch(0.08 0.01 265/.6);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 10px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12);
}

.bc-38 li {
  display: flex;
  align-items: center;
}

.bc-38 li + li::before {
  content: "›";
  margin: 0 9px;
  color: oklch(0.6 0.02 265);
}

.bc-38 a {
  padding: 5px 10px;
  border-radius: 9px;
  font: 500 14px/1 system-ui,sans-serif;
  color: oklch(0.82 0.02 265);
  text-decoration: none;
  transition: background-color .2s ease,color .2s ease;
}

.bc-38 a:hover {
  color: #fff;
  background: oklch(0.4 0.02 265/.5);
}

.bc-38 a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.bc-38 li[aria-current="page"] a {
  color: #fff;
  background: color-mix(in oklab,var(--accent) 26%,oklch(0.25 0.02 265));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}

@media (prefers-reduced-motion: reduce) {
  .bc-38 a {
    transition: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — dark translucent fill under blur(14px) saturate(160%) with a lit top rim; light text and a solid-ish current wash keep dark glass readable. */
```

How this works

Where demo 06 frosts light glass over colour, this frosts dark glass over a moody backdrop: the panel is a low-lightness translucent fill (oklch(0.2 ... / .55)) under backdrop-filter:blur(14px) saturate(160%), so the background darkens and blurs behind it into a deep frosted pane. A single inset 0 1px 0 rgba(255,255,255,.12) paints the lit top rim, and a subtle bottom border in near-black grounds it. Links are a cool desaturated light tone; the current page brightens to near-white on a faint accent wash.

The discipline that keeps dark glass accessible: text is a genuinely light tone (not mid-grey) so it clears contrast against the dark frost, and the current crumb doesn't rely on the translucent fill for legibility — it gets a solid-ish accent-tinted background behind the text. Focus rings are a bright accent outline that stands out on the dark surface. It's the treatment for dark SaaS shells, music/creative apps, and any night-mode surface that wants the glass look without the light-mode brightness.

Make it yours

Frost darkness: raise the fill lightness for a lighter charcoal, lower for near-black glass.
Accent hue recolours the current wash and focus ring — cool cyans and violets suit dark glass.
Backdrop is yours to art-direct — the gradient here is a placeholder for whatever dark scene sits behind.
Add a faint noise/grain overlay at 3% opacity for a richer, less digital frost.

Gotchas — read before shipping

Dark frost still needs a busy-ish backdrop to read as glass — over flat black it's just a slightly transparent panel.
Light text on dark frost must be genuinely light (≥ oklch 0.8) — mid-grey on translucent dark fails contrast when the backdrop is dark too.
Include -webkit-backdrop-filter or Safari renders an opaque panel.
Keep one glass surface — stacking frosted panels compounds GPU cost and muddies the blur.

Browser support

Chrome	Safari	Firefox	Edge
111+	16.4+	103+	111+

backdrop-filter (Safari prefixed) + oklch (2023) are the dependencies. Fallback without backdrop-filter: a solid dark panel — still perfectly usable.

Techniques used in this demo

backdrop-filterMDN ↗radial-gradient()MDN ↗color-mix()MDN ↗:focus-visibleMDN ↗box-shadowMDN ↗