39 CSS Breadcrumbs18 / 39

Pure CSSMIT licensed

NFT/Web3 Holographic Shimmer Breadcrumb Component

A dark deep-space breadcrumb bar with a Pokemon-holo-card iridescent shimmer that sweeps a conic rainbow across the frosted glass surface on hover, giving NFT marketplaces an angle-dependent signature that fits collection to token drill-down paths.

Published

Live Demo
Try it

The code

<section class="bc-18" aria-label="Web3 NFT breadcrumb navigation demo">
      <nav aria-label="Breadcrumb">
        <ol class="bc-18__list">
          <li class="bc-18__item">
            <a class="bc-18__link" href="#">
              <svg class="bc-18__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3 11.5 12 4l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></svg>
              <span>Home</span>
            </a>
          </li>
          <li class="bc-18__item"><a class="bc-18__link" href="#">Collections</a></li>
          <li class="bc-18__item"><a class="bc-18__link" href="#">CryptoPunks</a></li>
          <li class="bc-18__item"><a class="bc-18__link" aria-current="page" href="#">Punk #7804</a></li>
        </ol>
      </nav>
    </section>
@property --bc-18-holo-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.bc-18 {
  --bc-18-bg-1: oklch(0.16 0.06 275);
  --bc-18-bg-2: oklch(0.11 0.05 295);
  --bc-18-bg-3: oklch(0.09 0.04 250);
  --bc-18-card: oklch(0.22 0.03 275 / 0.55);
  --bc-18-stroke: oklch(0.78 0.05 280 / 0.22);
  --bc-18-ink: oklch(0.94 0.02 280);
  --bc-18-muted: oklch(0.72 0.04 280);
  --bc-18-focus: oklch(0.82 0.18 300);
  --bc-18-holo-1: oklch(0.82 0.19 25);
  --bc-18-holo-2: oklch(0.86 0.19 90);
  --bc-18-holo-3: oklch(0.84 0.18 160);
  --bc-18-holo-4: oklch(0.80 0.20 240);
  --bc-18-holo-5: oklch(0.78 0.22 315);
  --bc-18-holo-opacity: 0.35;
  --bc-18-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bc-18-size: 0.9375rem;
  --bc-18-weight: 500;
  --bc-18-collapse: 36rem;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 4rem);
  font-family: var(--bc-18-font);
  color: var(--bc-18-ink);
  background: radial-gradient(1200px 700px at 15% 10%, oklch(0.30 0.10 285 / 0.55), transparent 60%), radial-gradient(900px 600px at 85% 90%, oklch(0.28 0.12 320 / 0.45), transparent 65%), linear-gradient(160deg, var(--bc-18-bg-1), var(--bc-18-bg-2) 55%, var(--bc-18-bg-3));
  overflow: hidden;
}

.bc-18 *,
.bc-18 *::before,
.bc-18 *::after {
  box-sizing: border-box;
}

.bc-18 nav {
  width: min(100%, 720px);
}

.bc-18__list {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0.5rem 1rem;
  list-style: none;
  border-radius: 999px;
  background: var(--bc-18-card);
  border: 1px solid var(--bc-18-stroke);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.08) inset, 0 20px 50px -20px oklch(0 0 0 / 0.55);
  overflow: hidden;
}

.bc-18__list::before,
.bc-18__list::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms ease;
  z-index: 0;
}

.bc-18__list::before {
  background: conic-gradient(
          from var(--bc-18-holo-angle),
          var(--bc-18-holo-1),
          var(--bc-18-holo-2),
          var(--bc-18-holo-3),
          var(--bc-18-holo-4),
          var(--bc-18-holo-5),
          var(--bc-18-holo-1)
        );
  mix-blend-mode: color-dodge;
  filter: blur(6px) saturate(160%);
}

.bc-18__list::after {
  background: repeating-linear-gradient(
          115deg,
          oklch(1 0 0 / 0.10) 0 2px,
          transparent 2px 7px
        );
  mix-blend-mode: overlay;
  mask-image: linear-gradient(115deg, transparent 20%, black 45%, black 60%, transparent 85%);
  -webkit-mask-image: linear-gradient(115deg, transparent 20%, black 45%, black 60%, transparent 85%);
}

.bc-18__list:hover::before,
.bc-18__list:focus-within::before {
  opacity: var(--bc-18-holo-opacity);
  animation: bc-18-spin 6s linear infinite;
}

.bc-18__list:hover::after,
.bc-18__list:focus-within::after {
  opacity: 0.55;
  animation: bc-18-sweep 3.6s ease-in-out infinite;
}

@keyframes bc-18-spin {
  to {
    --bc-18-holo-angle: 360deg;
  }
}

@keyframes bc-18-sweep {
  0%,
    100% {
    transform: translateX(-8%);
  }

  50% {
    transform: translateX(8%);
  }
}

.bc-18__item {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.bc-18__item + .bc-18__item::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 0.35rem 0 0.1rem;
  border-right: 1.5px solid var(--bc-18-muted);
  border-top: 1.5px solid var(--bc-18-muted);
  transform: rotate(45deg);
  opacity: 0.7;
}

.bc-18__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  font-size: var(--bc-18-size);
  font-weight: var(--bc-18-weight);
  letter-spacing: 0.01em;
  color: var(--bc-18-muted);
  text-decoration: none;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.bc-18__link:hover {
  color: var(--bc-18-ink);
  background: color-mix(in oklch, var(--bc-18-ink) 8%, transparent);
}

.bc-18__link:focus-visible {
  outline: 2px solid var(--bc-18-focus);
  outline-offset: 3px;
  color: var(--bc-18-ink);
}

.bc-18__link[aria-current="page"] {
  color: var(--bc-18-ink);
  background: color-mix(in oklch, var(--bc-18-ink) 6%, transparent);
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(
          90deg,
          color-mix(in oklch, var(--bc-18-holo-1) 70%, transparent),
          color-mix(in oklch, var(--bc-18-holo-3) 70%, transparent),
          color-mix(in oklch, var(--bc-18-holo-5) 70%, transparent)
        ) 1;
  border-radius: 8px 8px 0 0;
}

.bc-18__icon {
  width: 16px;
  height: 16px;
  color: currentColor;
  flex: none;
}

.bc-18__list:has(.bc-18__link:hover) .bc-18__link:not(:hover):not([aria-current="page"]) {
  color: color-mix(in oklch, var(--bc-18-muted) 80%, transparent);
}

@container (max-width: 24rem) {
  .bc-18__item:nth-child(2),
    .bc-18__item:nth-child(3) {
    display: none;
  }

  .bc-18__list::after {
    content: "";
  }
}

@media (max-width: 30rem) {
  .bc-18__link {
    padding: 0.4rem 0.5rem;
  }

  .bc-18__item + .bc-18__item::before {
    margin: 0 0.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bc-18__list:hover::before,
    .bc-18__list:focus-within::before,
    .bc-18__list:hover::after,
    .bc-18__list:focus-within::after {
    animation: none;
  }

  .bc-18__link {
    transition: none;
  }
}
/* No JavaScript — @property makes --bc-18-holo-angle animatable, so the conic-gradient shimmer rotates via @keyframes. */
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: NFT/Web3 Holographic Shimmer Breadcrumb Component
Source: https://codefronts.com/navigation/css-breadcrumbs/holographic-shimmer/

A dark deep-space breadcrumb bar with a Pokemon-holo-card iridescent shimmer that sweeps a conic rainbow across the frosted glass surface on hover, giving NFT marketplaces an angle-dependent signature that fits collection to token drill-down paths.
## HTML
```html
<section class="bc-18" aria-label="Web3 NFT breadcrumb navigation demo">
      <nav aria-label="Breadcrumb">
        <ol class="bc-18__list">
          <li class="bc-18__item">
            <a class="bc-18__link" href="#">
              <svg class="bc-18__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3 11.5 12 4l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></svg>
              <span>Home</span>
            </a>
          </li>
          <li class="bc-18__item"><a class="bc-18__link" href="#">Collections</a></li>
          <li class="bc-18__item"><a class="bc-18__link" href="#">CryptoPunks</a></li>
          <li class="bc-18__item"><a class="bc-18__link" aria-current="page" href="#">Punk #7804</a></li>
        </ol>
      </nav>
    </section>
```
## CSS
```css
@property --bc-18-holo-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.bc-18 {
  --bc-18-bg-1: oklch(0.16 0.06 275);
  --bc-18-bg-2: oklch(0.11 0.05 295);
  --bc-18-bg-3: oklch(0.09 0.04 250);
  --bc-18-card: oklch(0.22 0.03 275 / 0.55);
  --bc-18-stroke: oklch(0.78 0.05 280 / 0.22);
  --bc-18-ink: oklch(0.94 0.02 280);
  --bc-18-muted: oklch(0.72 0.04 280);
  --bc-18-focus: oklch(0.82 0.18 300);
  --bc-18-holo-1: oklch(0.82 0.19 25);
  --bc-18-holo-2: oklch(0.86 0.19 90);
  --bc-18-holo-3: oklch(0.84 0.18 160);
  --bc-18-holo-4: oklch(0.80 0.20 240);
  --bc-18-holo-5: oklch(0.78 0.22 315);
  --bc-18-holo-opacity: 0.35;
  --bc-18-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bc-18-size: 0.9375rem;
  --bc-18-weight: 500;
  --bc-18-collapse: 36rem;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 4rem);
  font-family: var(--bc-18-font);
  color: var(--bc-18-ink);
  background: radial-gradient(1200px 700px at 15% 10%, oklch(0.30 0.10 285 / 0.55), transparent 60%), radial-gradient(900px 600px at 85% 90%, oklch(0.28 0.12 320 / 0.45), transparent 65%), linear-gradient(160deg, var(--bc-18-bg-1), var(--bc-18-bg-2) 55%, var(--bc-18-bg-3));
  overflow: hidden;
}

.bc-18 *,
.bc-18 *::before,
.bc-18 *::after {
  box-sizing: border-box;
}

.bc-18 nav {
  width: min(100%, 720px);
}

.bc-18__list {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0.5rem 1rem;
  list-style: none;
  border-radius: 999px;
  background: var(--bc-18-card);
  border: 1px solid var(--bc-18-stroke);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.08) inset, 0 20px 50px -20px oklch(0 0 0 / 0.55);
  overflow: hidden;
}

.bc-18__list::before,
.bc-18__list::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms ease;
  z-index: 0;
}

.bc-18__list::before {
  background: conic-gradient(
          from var(--bc-18-holo-angle),
          var(--bc-18-holo-1),
          var(--bc-18-holo-2),
          var(--bc-18-holo-3),
          var(--bc-18-holo-4),
          var(--bc-18-holo-5),
          var(--bc-18-holo-1)
        );
  mix-blend-mode: color-dodge;
  filter: blur(6px) saturate(160%);
}

.bc-18__list::after {
  background: repeating-linear-gradient(
          115deg,
          oklch(1 0 0 / 0.10) 0 2px,
          transparent 2px 7px
        );
  mix-blend-mode: overlay;
  mask-image: linear-gradient(115deg, transparent 20%, black 45%, black 60%, transparent 85%);
  -webkit-mask-image: linear-gradient(115deg, transparent 20%, black 45%, black 60%, transparent 85%);
}

.bc-18__list:hover::before,
.bc-18__list:focus-within::before {
  opacity: var(--bc-18-holo-opacity);
  animation: bc-18-spin 6s linear infinite;
}

.bc-18__list:hover::after,
.bc-18__list:focus-within::after {
  opacity: 0.55;
  animation: bc-18-sweep 3.6s ease-in-out infinite;
}

@keyframes bc-18-spin {
  to {
    --bc-18-holo-angle: 360deg;
  }
}

@keyframes bc-18-sweep {
  0%,
    100% {
    transform: translateX(-8%);
  }

  50% {
    transform: translateX(8%);
  }
}

.bc-18__item {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.bc-18__item + .bc-18__item::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 0.35rem 0 0.1rem;
  border-right: 1.5px solid var(--bc-18-muted);
  border-top: 1.5px solid var(--bc-18-muted);
  transform: rotate(45deg);
  opacity: 0.7;
}

.bc-18__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  font-size: var(--bc-18-size);
  font-weight: var(--bc-18-weight);
  letter-spacing: 0.01em;
  color: var(--bc-18-muted);
  text-decoration: none;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.bc-18__link:hover {
  color: var(--bc-18-ink);
  background: color-mix(in oklch, var(--bc-18-ink) 8%, transparent);
}

.bc-18__link:focus-visible {
  outline: 2px solid var(--bc-18-focus);
  outline-offset: 3px;
  color: var(--bc-18-ink);
}

.bc-18__link[aria-current="page"] {
  color: var(--bc-18-ink);
  background: color-mix(in oklch, var(--bc-18-ink) 6%, transparent);
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(
          90deg,
          color-mix(in oklch, var(--bc-18-holo-1) 70%, transparent),
          color-mix(in oklch, var(--bc-18-holo-3) 70%, transparent),
          color-mix(in oklch, var(--bc-18-holo-5) 70%, transparent)
        ) 1;
  border-radius: 8px 8px 0 0;
}

.bc-18__icon {
  width: 16px;
  height: 16px;
  color: currentColor;
  flex: none;
}

.bc-18__list:has(.bc-18__link:hover) .bc-18__link:not(:hover):not([aria-current="page"]) {
  color: color-mix(in oklch, var(--bc-18-muted) 80%, transparent);
}

@container (max-width: 24rem) {
  .bc-18__item:nth-child(2),
    .bc-18__item:nth-child(3) {
    display: none;
  }

  .bc-18__list::after {
    content: "";
  }
}

@media (max-width: 30rem) {
  .bc-18__link {
    padding: 0.4rem 0.5rem;
  }

  .bc-18__item + .bc-18__item::before {
    margin: 0 0.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bc-18__list:hover::before,
    .bc-18__list:focus-within::before,
    .bc-18__list:hover::after,
    .bc-18__list:focus-within::after {
    animation: none;
  }

  .bc-18__link {
    transition: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — @property makes --bc-18-holo-angle animatable, so the conic-gradient shimmer rotates via @keyframes. */
```

How this works

The shimmer is powered by a CSS @property-registered custom angle --bc-18-holo-angle typed as <angle>, which lets the browser interpolate a conic-gradient() rotation smoothly. On hover, a @keyframes loop rotates the angle from 0deg to 360deg, driving an absolutely-positioned overlay filled with an oklch() conic rainbow. That overlay is composited with mix-blend-mode: color-dodge against a backdrop-filter: blur() frosted glass card so the rainbow reads as reflected light rather than a flat sticker, and a masked repeating linear gradient adds the tell-tale holographic scanlines.

The markup is a real <nav aria-label="Breadcrumb"> wrapping an ordered list, with each crumb an <li> holding an anchor sized to a 44px hit target. Chevron separators are ::before pseudo-elements on every item except the first, kept out of the accessibility tree so screen readers hear only the crumb text. The final crumb carries aria-current="page" and gets a rainbow-tinted bottom border built from color-mix(), and every link has a bespoke :focus-visible ring. A prefers-reduced-motion: reduce guard freezes the shimmer angle so the tint stays but the motion stops.

Make it yours

  • Rebrand the palette by editing the --bc-18-holo-1 through --bc-18-holo-5 oklch() stops that feed the conic gradient.
  • Dial shimmer strength with --bc-18-holo-opacity (0.35 default) or swap mix-blend-mode from color-dodge to screen for a softer sheen.
  • Restyle crumb type via --bc-18-font, --bc-18-size, and --bc-18-weight; a monospace stack reads especially on-brand for Web3.
  • Enable the mobile collapse pattern by narrowing the container below --bc-18-collapse (36rem) — a :has() rule hides middle crumbs and inserts an ellipsis.

Gotchas — read before shipping

  • @property is the gate for the sweep — Firefox <128 and older Safari fall back to a static tint, which still looks holo but no longer rotates; verify visually before shipping.
  • mix-blend-mode: color-dodge needs a non-transparent surface beneath it or the rainbow disappears; the frosted card provides that base, so do not remove its background-color when rebranding.
  • Schema.org BreadcrumbList still expects absolute https:// URLs even on Web3 marketplaces — swap the placeholder href="#" values for real hostnames before adding JSON-LD.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Floor set by :has(), oklch(), color-mix(), backdrop-filter, @property, @container as this demo is written. The core technique itself goes back further — Chrome 85+.

@property is the gate — universal in 2024+ engines. Without it, the shimmer sits static rather than rotating; still holo-tinted, just no motion.

Techniques used in this demo

mix-blend-modeMDN ↗@propertyMDN ↗:focus-withinMDN ↗container queriesMDN ↗conic-gradient()MDN ↗:has()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →