Gradient Divider
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-gradient-divider" role="separator" aria-hidden="true"></div>CSS
/* Gradient Divider
A line that fades to transparent at both edges.
Customize: --divider-color, --divider-opacity */
.nuda-gradient-divider {
--divider-color: #e4ff54;
--divider-opacity: 0.5;
width: 100%;
height: 1px;
background: linear-gradient(
90deg,
transparent,
var(--divider-color),
transparent
);
opacity: var(--divider-opacity);
}How to use Gradient Divider
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.