39 CSS Breadcrumbs
19 / 39

All 39 in 39 CSS Breadcrumbs

  1. 01Accessible Breadcrumb Navigation with Schema.org Microdata & ARIA
  2. 02Responsive Collapsing CSS Breadcrumb Bar using :has() Selector
  3. 03Adaptive Light & Dark Mode Breadcrumb Bar with CSS Custom Properties
  4. 04E-Commerce Filter & Attribute Breadcrumb Navigation Component
  5. 05Modern Glassmorphism Floating Breadcrumb Bar UI Design
  6. 06Neumorphic Soft UI Breadcrumb Navigation with Dual Box Shadows
  7. 07Sticky Top CSS Navigation Header with Shrinking Breadcrumb Trail
  8. 08Material Design Flat Breadcrumb Navigation Bar
  9. 09Isometric 3D Layered CSS Breadcrumb Navigation
  10. 10Breadcrumb Bar with Built-In Dropdown Sibling Menus
  11. 11Full-Width Block-Style Segmented CSS Breadcrumb Bar
  12. 12CSS Custom-Property Accent-Color Toggle Breadcrumb
  13. 13Seamless Arrow-Cutout CSS3 Breadcrumb Trail
  14. 14Compact Icon-Only Home Node CSS Breadcrumb Bar
  15. 15Segmented Rounded-Outline Pill CSS Breadcrumb
  16. 16Neumorphic Soft Inset-Shadow CSS Breadcrumbs
  17. 17CSS Grid Auto-Fitting Responsive Breadcrumb Trail
  18. 18NFT/Web3 Holographic Shimmer Breadcrumb Component
  19. 19SaaS Marketing Site Gradient Text Breadcrumb Bar
  20. 20Airbnb-Style Filter Chip Breadcrumb Navigation with Icons
  21. 21Editorial Blog Breadcrumb with Animated Wave Underline Hover
  22. 22Developer Docs Breadcrumb with One-Click Path Copy to Clipboard
  23. 23Modern Pure CSS Arrow Breadcrumb Bar using clip-path Polygons
  24. 24Multi-Line Aligned CSS Grid Subgrid Breadcrumb Layout
  25. 25Interactive Breadcrumb Links with Animated CSS Underline Glow
  26. 26Minimalist CSS Breadcrumb with Custom SVG Separators
  27. 27Multi-Step Checkout & Form Wizard CSS Breadcrumb Indicator
  28. 28Pure CSS Ribbon-Style Chevron Breadcrumb Trail
  29. 29Pill-Shape Badge CSS Breadcrumb Bar UI
  30. 30Clean Line-Separator Minimalist CSS Breadcrumbs
  31. 31Gradient Background Glow CSS Breadcrumb Bar
  32. 32Floating Card Shadow CSS Breadcrumb Navigation
  33. 33Truncated Ellipsis Compact CSS Mobile Breadcrumb
  34. 34Inline Bullet-Point Dot Separator CSS Breadcrumb
  35. 35Skewed Parallel Quadrilateral CSS Breadcrumb Bar
  36. 36Outline Border-Only Geometric CSS Breadcrumbs
  37. 37Circular Icon & Numbered CSS Step Breadcrumbs
  38. 38Frosted Glass Dark UI CSS Breadcrumb Component
  39. 39Modern Micro-Interaction Animated Hover Breadcrumbs
Pure CSSMIT licensed

SaaS Marketing Site Gradient Text Breadcrumb Bar

The breadcrumb SaaS marketing sites like Linear and Vercel reach for when a single line of text needs to feel alive. Crumbs are painted with a slow-drifting conic gradient clipped to text via @property, so the hue cycles through vivid oklch stops without ever touching the layout.

Live Demo
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

<section class="bc-19" aria-label="SaaS marketing site gradient text breadcrumb demo">
      <nav aria-label="Breadcrumb">
        <ol class="bc-19__list">
          <li class="bc-19__item"><a class="bc-19__link" href="#">Docs</a></li>
          <li class="bc-19__item"><a class="bc-19__link" href="#">Guides</a></li>
          <li class="bc-19__item"><a class="bc-19__link" href="#">Authentication</a></li>
          <li class="bc-19__item"><a class="bc-19__link" aria-current="page" href="#">Magic Links</a></li>
        </ol>
      </nav>
    </section>
@property --grad-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.bc-19 {
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 6vw, 64px) clamp(16px, 5vw, 48px);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: radial-gradient(1200px 600px at 50% -10%, oklch(0.96 0.02 270 / 0.9), transparent 60%), linear-gradient(180deg, oklch(0.99 0.005 260), oklch(0.97 0.01 265));
  color: oklch(0.28 0.02 260);
  -webkit-font-smoothing: antialiased;
}

.bc-19 nav {
  width: 100%;
  max-width: 880px;
  padding: 14px 22px;
  border-radius: 14px;
  background: oklch(1 0 0 / 0.72);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid oklch(0.9 0.01 260 / 0.7);
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.9) inset, 0 12px 40px -18px oklch(0.3 0.05 270 / 0.35);
}

.bc-19__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(14px, 1.6vw, 16px);
  font-weight: 500;
  letter-spacing: -0.005em;
}

.bc-19__item {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.bc-19__item + .bc-19__item::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 10px;
  border-right: 1.5px solid oklch(0.75 0.02 260);
  border-bottom: 1.5px solid oklch(0.75 0.02 260);
  transform: rotate(-45deg);
  opacity: 0.7;
}

.bc-19__link {
  --grad-stops: oklch(0.62 0.2 285), oklch(0.68 0.22 320), oklch(0.72 0.2 25), oklch(0.7 0.2 190), oklch(0.62 0.2 285);
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: oklch(0.42 0.03 265);
  background: conic-gradient(from var(--grad-angle), var(--grad-stops));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: bc31-drift 18s linear infinite;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.bc-19__link::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 4px;
  height: 1.5px;
  border-radius: 2px;
  background: conic-gradient(from var(--grad-angle), var(--grad-stops));
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: left center;
  transition: opacity 0.25s ease, transform 0.35s ease;
}

.bc-19__link:hover,
.bc-19__link:focus-visible {
  animation-duration: 6s;
  filter: saturate(1.15);
}

.bc-19__link:hover::after,
.bc-19__link:focus-visible::after {
  opacity: 0.85;
  transform: scaleX(1);
}

.bc-19__link:focus-visible {
  outline: 2px solid oklch(0.62 0.2 285);
  outline-offset: 3px;
}

.bc-19__link[aria-current='page'] {
  --grad-stops: oklch(0.6 0.24 300), oklch(0.68 0.24 340), oklch(0.72 0.22 20), oklch(0.66 0.24 275), oklch(0.6 0.24 300);
  font-weight: 650;
  animation-duration: 7s;
}

@keyframes bc31-drift {
  to {
    --grad-angle: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bc-19__link,
    .bc-19__link[aria-current='page'] {
    animation: none;
    background: linear-gradient(90deg, oklch(0.62 0.2 285), oklch(0.68 0.22 320), oklch(0.66 0.24 20));
    -webkit-background-clip: text;
    background-clip: text;
  }

  .bc-19__link::after {
    transition: none;
  }
}

@supports not (background: paint(something)) {
  /* Older engines without @property still get a static clipped gradient. */

  .bc-19__link {
    background: linear-gradient(90deg, oklch(0.62 0.2 285), oklch(0.68 0.22 320), oklch(0.66 0.24 20));
    -webkit-background-clip: text;
    background-clip: text;
    animation: none;
  }
}
/* No JavaScript — @property + conic-gradient + background-clip:text drives the animated gradient text. */
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: SaaS Marketing Site Gradient Text Breadcrumb Bar
Source: https://codefronts.com/navigation/css-breadcrumbs/gradient-text/

The breadcrumb SaaS marketing sites like Linear and Vercel reach for when a single line of text needs to feel alive. Crumbs are painted with a slow-drifting conic gradient clipped to text via @property, so the hue cycles through vivid oklch stops without ever touching the layout.
## HTML
```html
<section class="bc-19" aria-label="SaaS marketing site gradient text breadcrumb demo">
      <nav aria-label="Breadcrumb">
        <ol class="bc-19__list">
          <li class="bc-19__item"><a class="bc-19__link" href="#">Docs</a></li>
          <li class="bc-19__item"><a class="bc-19__link" href="#">Guides</a></li>
          <li class="bc-19__item"><a class="bc-19__link" href="#">Authentication</a></li>
          <li class="bc-19__item"><a class="bc-19__link" aria-current="page" href="#">Magic Links</a></li>
        </ol>
      </nav>
    </section>
```
## CSS
```css
@property --grad-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.bc-19 {
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 6vw, 64px) clamp(16px, 5vw, 48px);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: radial-gradient(1200px 600px at 50% -10%, oklch(0.96 0.02 270 / 0.9), transparent 60%), linear-gradient(180deg, oklch(0.99 0.005 260), oklch(0.97 0.01 265));
  color: oklch(0.28 0.02 260);
  -webkit-font-smoothing: antialiased;
}

.bc-19 nav {
  width: 100%;
  max-width: 880px;
  padding: 14px 22px;
  border-radius: 14px;
  background: oklch(1 0 0 / 0.72);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid oklch(0.9 0.01 260 / 0.7);
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.9) inset, 0 12px 40px -18px oklch(0.3 0.05 270 / 0.35);
}

.bc-19__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(14px, 1.6vw, 16px);
  font-weight: 500;
  letter-spacing: -0.005em;
}

.bc-19__item {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.bc-19__item + .bc-19__item::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 10px;
  border-right: 1.5px solid oklch(0.75 0.02 260);
  border-bottom: 1.5px solid oklch(0.75 0.02 260);
  transform: rotate(-45deg);
  opacity: 0.7;
}

.bc-19__link {
  --grad-stops: oklch(0.62 0.2 285), oklch(0.68 0.22 320), oklch(0.72 0.2 25), oklch(0.7 0.2 190), oklch(0.62 0.2 285);
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: oklch(0.42 0.03 265);
  background: conic-gradient(from var(--grad-angle), var(--grad-stops));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: bc31-drift 18s linear infinite;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.bc-19__link::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 4px;
  height: 1.5px;
  border-radius: 2px;
  background: conic-gradient(from var(--grad-angle), var(--grad-stops));
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: left center;
  transition: opacity 0.25s ease, transform 0.35s ease;
}

.bc-19__link:hover,
.bc-19__link:focus-visible {
  animation-duration: 6s;
  filter: saturate(1.15);
}

.bc-19__link:hover::after,
.bc-19__link:focus-visible::after {
  opacity: 0.85;
  transform: scaleX(1);
}

.bc-19__link:focus-visible {
  outline: 2px solid oklch(0.62 0.2 285);
  outline-offset: 3px;
}

.bc-19__link[aria-current='page'] {
  --grad-stops: oklch(0.6 0.24 300), oklch(0.68 0.24 340), oklch(0.72 0.22 20), oklch(0.66 0.24 275), oklch(0.6 0.24 300);
  font-weight: 650;
  animation-duration: 7s;
}

@keyframes bc31-drift {
  to {
    --grad-angle: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bc-19__link,
    .bc-19__link[aria-current='page'] {
    animation: none;
    background: linear-gradient(90deg, oklch(0.62 0.2 285), oklch(0.68 0.22 320), oklch(0.66 0.24 20));
    -webkit-background-clip: text;
    background-clip: text;
  }

  .bc-19__link::after {
    transition: none;
  }
}

@supports not (background: paint(something)) {
  /* Older engines without @property still get a static clipped gradient. */

  .bc-19__link {
    background: linear-gradient(90deg, oklch(0.62 0.2 285), oklch(0.68 0.22 320), oklch(0.66 0.24 20));
    -webkit-background-clip: text;
    background-clip: text;
    animation: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — @property + conic-gradient + background-clip:text drives the animated gradient text. */
```

How this works

The star technique is a registered CSS custom property. @property --grad-angle declares the value as an <angle>, which lets the browser interpolate it smoothly across a @keyframes loop instead of snapping between string values. That angle drives a conic-gradient() built from wide-gamut oklch() stops, then background-clip: text plus the -webkit-background-clip: text prefix mask the paint to each crumb glyph. The current crumb uses a faster keyframe cycle and a punchier stop list so it reads as the visual anchor.

Semantics stay conventional: a <nav aria-label="Breadcrumb"> wraps an <ol>, the final crumb carries aria-current="page", and chevron separators are injected via ::before with aria-hidden implicitly handled since they never enter the accessibility tree. Every link gets a 44px minimum hit target, a :focus-visible ring that survives on any background, and the whole animation is silenced under prefers-reduced-motion.

Make it yours

  • Retune the palette by swapping the oklch() stops inside --grad-stops — keep chroma near 0.2 for that vivid marketing-site glow.
  • Slow or speed the drift by changing the 18s duration on @keyframes bc31-drift; the current crumb runs a faster 7s loop.
  • Swap chevrons for slashes or dots by editing the content value on .bc-19__item + .bc-19__item::before.
  • Force a dark editorial bar by toggling color-scheme: dark on .bc-19 — the gradient stops already read well on both surfaces.

Gotchas — read before shipping

  • Without @property support the angle jumps between keyframes instead of interpolating. Ship a static background fallback outside the @property block so pre-Firefox-128 users see a fixed gradient.
  • The -webkit-background-clip: text prefix is still required alongside the unprefixed rule in Safari and Chromium — omitting either one paints the background rectangle instead of clipping to glyphs.
  • Pair -webkit-text-fill-color: transparent with a real color declaration; if the background fails to load or clip, that color is what selection highlights and screen-reader mirrors will use.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

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

@property is the gate. Fallback: solid crumb color from a static rule outside the @property block.

Techniques used in this demo

background-clip: textMDN ↗@propertyMDN ↗conic-gradient()MDN ↗filterMDN ↗backdrop-filterMDN ↗radial-gradient()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →