Skip to content

Flowing Border

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

Animated GradientsHTMLCSSany framework
Flowing

Copy into your project

HTML
<!-- Flowing Border Card -->
<div class="nuda-gradient-border-flow">
  <div class="nuda-gradient-border-flow__inner">Flowing</div>
</div>
CSS
.nuda-gradient-border-flow {
  padding: 2px;
  border-radius: 14px;
  background: linear-gradient(90deg,#e4ff54,#22d3ee,#a855f7,#e4ff54);
  background-size: 300% 100%;
  animation: nuda-gradient-border-flow-run 4s linear infinite;
}

.nuda-gradient-border-flow__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 110px;
  border-radius: 12px;
  background: #09090b;
  color: #fafafa;
  font: 600 16px/1 system-ui,sans-serif;
}

@keyframes nuda-gradient-border-flow-run {
  to {
    background-position: 300% 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-gradient-border-flow {
    animation: none;
  }
}

How to use Flowing Border

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 animated gradients components

← Browse all NudaUI components