Skip to content

Double Stripe

A copy-paste dividers component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.

DividersHTMLCSSany framework

Copy into your project

HTML
<div class="nuda-2stripe" role="separator">
  <span></span>
  <span></span>
</div>
CSS
.nuda-2stripe span {
  height: 1px;
  background: linear-gradient(90deg, transparent, #e4ff54, transparent);
  opacity: 0.6;
  animation: nuda-2stripe-pulse 3s ease-in-out infinite;
}

.nuda-2stripe span:nth-child(2) {
  opacity: 0.3;
  animation-delay: 0.5s;
}

@keyframes nuda-2stripe-pulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.8; }
}

How to use Double Stripe

Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.

Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.

More dividers components

← Browse all NudaUI components