67:I[8054,["/_next/static/chunks/0n8co495bugh0.js","/_next/static/chunks/0csmpwpm9scwv.js","/_next/static/chunks/2tf14-0oaa2ok.js","/_next/static/chunks/0i6pfab6ujd9i.js","/_next/static/chunks/32u7gfw7_j3cs.js"],"EffectCard"] 68:T4f0,

1Plan 2Build 3Ship

Scope agreed and written down in one page.

Two branches open, both behind review.

Tagged, signed and pushed to the registry.

69:Tc86,.fx-tab-cobalt-stepper { position: relative; width: 300px; font-family: system-ui, sans-serif; } .fx-tab-cobalt-stepper-radio { position: absolute; width: 1px; height: 1px; opacity: 0; } .fx-tab-cobalt-stepper-rail { position: relative; display: flex; } .fx-tab-cobalt-stepper-line { position: absolute; top: 13px; left: 16%; right: 16%; height: 2px; background: #232a3a; } .fx-tab-cobalt-stepper-fill { position: absolute; top: 13px; left: 16%; right: 16%; height: 2px; background: linear-gradient(90deg, #1d4ed8, #60a5fa); transform: scaleX(0); transform-origin: left center; transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1); } .fx-tab-cobalt-stepper-step { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; color: #7b859b; cursor: pointer; transition: color 0.28s ease; } .fx-tab-cobalt-stepper-step:hover { color: #bfd4ff; } .fx-tab-cobalt-stepper-num { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #14161b; border: 1px solid #2b3346; font-size: 12px; transition: background 0.28s ease, border-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease; } .fx-tab-cobalt-stepper-panels { margin-top: 13px; } .fx-tab-cobalt-stepper-panel { display: none; margin: 0; font-size: 12px; line-height: 1.5; color: #a9b1c2; text-align: center; } .fx-tab-cobalt-stepper-radio:nth-of-type(2):checked ~ .fx-tab-cobalt-stepper-rail .fx-tab-cobalt-stepper-fill { transform: scaleX(0.5); } .fx-tab-cobalt-stepper-radio:nth-of-type(3):checked ~ .fx-tab-cobalt-stepper-rail .fx-tab-cobalt-stepper-fill { transform: scaleX(1); } .fx-tab-cobalt-stepper-radio:nth-of-type(1):checked ~ .fx-tab-cobalt-stepper-rail .fx-tab-cobalt-stepper-step:nth-of-type(1), .fx-tab-cobalt-stepper-radio:nth-of-type(2):checked ~ .fx-tab-cobalt-stepper-rail .fx-tab-cobalt-stepper-step:nth-of-type(2), .fx-tab-cobalt-stepper-radio:nth-of-type(3):checked ~ .fx-tab-cobalt-stepper-rail .fx-tab-cobalt-stepper-step:nth-of-type(3) { color: #eff6ff; } .fx-tab-cobalt-stepper-radio:nth-of-type(1):checked ~ .fx-tab-cobalt-stepper-rail .fx-tab-cobalt-stepper-step:nth-of-type(1) .fx-tab-cobalt-stepper-num, .fx-tab-cobalt-stepper-radio:nth-of-type(2):checked ~ .fx-tab-cobalt-stepper-rail .fx-tab-cobalt-stepper-step:nth-of-type(2) .fx-tab-cobalt-stepper-num, .fx-tab-cobalt-stepper-radio:nth-of-type(3):checked ~ .fx-tab-cobalt-stepper-rail .fx-tab-cobalt-stepper-step:nth-of-type(3) .fx-tab-cobalt-stepper-num { background: linear-gradient(180deg, #3b82f6, #1d4ed8); border-color: #60a5fa; color: #f0f7ff; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18); } .fx-tab-cobalt-stepper-radio:nth-of-type(1):checked ~ .fx-tab-cobalt-stepper-panels .fx-tab-cobalt-stepper-panel:nth-of-type(1), .fx-tab-cobalt-stepper-radio:nth-of-type(2):checked ~ .fx-tab-cobalt-stepper-panels .fx-tab-cobalt-stepper-panel:nth-of-type(2), .fx-tab-cobalt-stepper-radio:nth-of-type(3):checked ~ .fx-tab-cobalt-stepper-panels .fx-tab-cobalt-stepper-panel:nth-of-type(3) { display: block; }6:["$","main",null,{"className":"page-shell","children":[["$","script",null,{"type":"application/ld+json","suppressHydrationWarning":true,"dangerouslySetInnerHTML":{"__html":"[{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://librarycss.com/en\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"#stepper\",\"item\":\"https://librarycss.com/en/tags/stepper\"}]},{\"@context\":\"https://schema.org\",\"@type\":\"CollectionPage\",\"name\":\"stepper CSS effects\",\"description\":\"Free CSS effects tagged \\\"stepper\\\".\",\"url\":\"https://librarycss.com/en/tags/stepper\",\"inLanguage\":\"en-US\",\"mainEntity\":{\"@type\":\"ItemList\",\"numberOfItems\":1,\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Cobalt Stepper Tabs\",\"url\":\"https://librarycss.com/en/effects/tab-cobalt-stepper\"}]}}]"}}],["$","div",null,{"className":"page-container max-w-[1500px]","children":[["$","nav",null,{"aria-label":"Breadcrumbs","className":"min-w-0","children":["$","ol",null,{"className":"flex flex-wrap items-center gap-1 text-xs text-[color:var(--muted)]","children":[["$","li","/en",{"className":"flex min-w-0 items-center gap-1","children":[false,["$","$L1b",null,{"href":"/en","className":"truncate hover:text-[color:var(--foreground)]","children":"Home"}]]}],["$","li","/en/tags/stepper",{"className":"flex min-w-0 items-center gap-1","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":12,"height":12,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-chevron-right shrink-0 text-[color:var(--faint)]","aria-hidden":true,"children":[["$","path","mthhwq",{"d":"m9 18 6-6-6-6"}],"$undefined"]}],["$","span",null,{"className":"truncate font-medium text-[color:var(--foreground)]","aria-current":"page","children":"#stepper"}]]}]]}]}],["$","header",null,{"className":"mt-4","children":[["$","h1",null,{"className":"text-3xl font-bold tracking-[-0.04em] text-[color:var(--foreground)] sm:text-4xl","children":["#","stepper"," CSS effects"]}],["$","p",null,{"className":"mt-3 max-w-3xl text-sm leading-6 text-[color:var(--muted)]","children":["1"," free, pure-CSS effects match the \"","stepper","\" tag. Each is copy-ready and needs no library or build step."]}]]}],[["$","h2",null,{"className":"sr-only","children":"Effects tagged #stepper"}],["$","div",null,{"className":"mt-7 grid gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4","children":[["$","$L67","tab-cobalt-stepper",{"effect":{"id":"tab-cobalt-stepper","title":"Cobalt Stepper Tabs","category":"Tabs","description":"Numbered cobalt nodes on a rail, with the connecting line filling as you advance.","tags":["transform","gradient","stepper"],"html":"$68","css":"$69","previewVideoUrl":null},"hrefPrefix":"/en/effects","locale":"en"}]]}]],"$L6a","$L6b",null]}]]}]

Effects tagged #stepper

Cobalt Stepper Tabs

Popular tags