Plasma Blob
A copy-paste backgrounds component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
BackgroundsHTMLCSSany framework
Copy into your project
HTML
<div class="nuda-plasma">
<span class="nuda-plasma__b1"></span>
<span class="nuda-plasma__b2"></span>
<span class="nuda-plasma__b3"></span>
</div>CSS
.nuda-plasma {
position: relative;
overflow: hidden;
background: #09090b;
isolation: isolate;
filter: contrast(1.05);
}
.nuda-plasma span {
position: absolute;
width: 160px;
height: 160px;
border-radius: 50%;
filter: blur(40px);
mix-blend-mode: screen;
animation: nuda-plasma-move 14s ease-in-out infinite;
}
.nuda-plasma__b1 { background: #9d6dff; top: -30px; left: -30px; }
.nuda-plasma__b2 { background: #ff6dd4; bottom: -30px; right: -20px;
animation-delay: -5s; animation-duration: 18s; }
.nuda-plasma__b3 { background: #62b6ff; top: 30%; left: 35%;
animation-delay: -9s; animation-duration: 22s; }
@keyframes nuda-plasma-move {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(40px, -20px) scale(1.2); }
66% { transform: translate(-30px, 30px) scale(0.8); }
}How to use Plasma Blob
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.