39 CSS Breadcrumbs31 / 39

Pure CSSMIT licensed

Gradient Background Glow CSS Breadcrumb Bar

A vivid breadcrumb bar with a multi-stop gradient fill and a matching coloured glow beneath it, plus gradient-clipped text on the current crumb so its label is painted with the same spectrum. The bold, energetic treatment for landing pages and creative product headers — animated gradient optional.

Published Updated

Live Demo
Try it

The code

<nav class="bc-31" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Studio</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#" aria-current="page">Spectrum</a></li>
  </ol>
</nav>
.bc-31 {
  width: 100%;
  min-height: 100vh;
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 44px 32px;
  background: oklch(0.15 0.02 285);
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: center;
}

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

.bc-31 ol {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 11px 18px;
  border-radius: 14px;
  background: linear-gradient(100deg,oklch(0.6 0.2 300),oklch(0.62 0.19 260) 50%,oklch(0.68 0.17 200));
}

.bc-31 ol::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 14px;
  background: inherit;
  filter: blur(18px);
  opacity: .7;
  transform: translateY(8px);
  pointer-events: none;
}

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

.bc-31 li + li::before {
  content: "›";
  margin: 0 9px;
  color: rgba(255,255,255,.7);
}

.bc-31 a {
  padding: 5px 10px;
  border-radius: 8px;
  font: 600 14px/1 system-ui,sans-serif;
  color: #fff;
  text-decoration: none;
  transition: background-color .18s ease;
}

.bc-31 a:hover {
  background: rgba(255,255,255,.16);
}

.bc-31 a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.bc-31 li[aria-current="page"] a {
  font-weight: 800;
  background: linear-gradient(90deg,#fff,oklch(0.92 0.08 300));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .bc-31 a {
    transition: none;
  }
}
/* No JavaScript — the bar's gradient is re-blurred on a ::before to emit a matching glow; the current label uses background-clip:text for gradient-painted type. */
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: Gradient Background Glow CSS Breadcrumb Bar
Source: https://codefronts.com/navigation/css-breadcrumbs/neon-trail/

A vivid breadcrumb bar with a multi-stop gradient fill and a matching coloured glow beneath it, plus gradient-clipped text on the current crumb so its label is painted with the same spectrum. The bold, energetic treatment for landing pages and creative product headers — animated gradient optional.
## HTML
```html
<nav class="bc-31" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Studio</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#" aria-current="page">Spectrum</a></li>
  </ol>
</nav>
```
## CSS
```css
.bc-31 {
  width: 100%;
  min-height: 100vh;
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 44px 32px;
  background: oklch(0.15 0.02 285);
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: center;
}

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

.bc-31 ol {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 11px 18px;
  border-radius: 14px;
  background: linear-gradient(100deg,oklch(0.6 0.2 300),oklch(0.62 0.19 260) 50%,oklch(0.68 0.17 200));
}

.bc-31 ol::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 14px;
  background: inherit;
  filter: blur(18px);
  opacity: .7;
  transform: translateY(8px);
  pointer-events: none;
}

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

.bc-31 li + li::before {
  content: "›";
  margin: 0 9px;
  color: rgba(255,255,255,.7);
}

.bc-31 a {
  padding: 5px 10px;
  border-radius: 8px;
  font: 600 14px/1 system-ui,sans-serif;
  color: #fff;
  text-decoration: none;
  transition: background-color .18s ease;
}

.bc-31 a:hover {
  background: rgba(255,255,255,.16);
}

.bc-31 a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.bc-31 li[aria-current="page"] a {
  font-weight: 800;
  background: linear-gradient(90deg,#fff,oklch(0.92 0.08 300));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

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

## JavaScript
```js
/* No JavaScript — the bar's gradient is re-blurred on a ::before to emit a matching glow; the current label uses background-clip:text for gradient-painted type. */
```

How this works

The bar is a rounded container filled with a multi-stop linear-gradient, and the glow is the same gradient re-used as a blurred drop shadow — achieved by a ::before that copies the gradient, sits behind the bar, and is pushed down and blurred with filter:blur(), so the bar appears to emit coloured light onto the surface. The current crumb uses background-clip:text;color:transparent over a bright gradient, so its text is painted with the spectrum — the eye-catching 'gradient text' effect scoped to just the active label.

Nav links sit on the gradient in high-contrast white with a soft state layer on hover. An optional slow background-position animation on the bar makes the gradient drift for a living feel — guarded by prefers-reduced-motion. The trick to keeping it legible: white link text over mid-saturation gradient stops (not pastel), and the current gradient-text sits on the bar's darker area for contrast.

Make it yours

  • Gradient hues: 3 oklch stops within ~120° read as harmonious; spread them wider for a bolder rainbow.
  • Glow strength = the ::before blur radius + vertical offset; more blur = softer, larger halo.
  • Animate the drift by turning on the @keyframes and setting a long duration (18s+); keep it off for reduced motion.
  • Apply gradient-text to all crumbs, not just current, for a fully chromatic trail (watch contrast).

Gotchas — read before shipping

  • background-clip:text needs -webkit- prefix and color:transparent — gradient text silently fails without both.
  • Gradient text can drop below contrast — put it over the bar's darkest stop, and never use it for the ONLY copy of critical info.
  • The glow ::before must be z-index behind the bar and pointer-events:none, or it intercepts clicks.
  • Animating background-position is fine for a slow ambient drift but avoid fast loops — they're distracting and should respect reduced motion.

Browser support

ChromeSafariFirefoxEdge
111+15.4+113+111+

Floor set by oklch() as this demo is written. The core technique itself goes back further — Chrome all.

Gradients, filter:blur, background-clip:text (Safari prefixed) are universal. oklch() stops (2023) enhance the palette; hsl() stops degrade fine.

Techniques used in this demo

background-clip: textMDN ↗filterMDN ↗oklch()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →