Lift Shadow
A copy-paste cards & hover component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Cards & HoverHTMLCSSany framework
Lift Shadow
Lifts with deepening shadow
Copy into your project
HTML
<!-- Lift Shadow — lifts with deepening shadow on hover -->
<div class="nuda-lift-shadow" tabindex="0">
<h3 class="nuda-lift-shadow__title">Lift Shadow</h3>
<p class="nuda-lift-shadow__desc">Lifts with deepening shadow on hover</p>
</div>CSS
/* ── Lift Shadow ─────────────────────────────────────────────
Customize:
--nuda-ls-lift : hover lift distance
--nuda-ls-shadow : resting shadow
--nuda-ls-shadow-h : hover shadow
--nuda-ls-speed : transition speed
──────────────────────────────────────────────────────────── */
.nuda-lift-shadow {
--nuda-ls-lift: -8px;
--nuda-ls-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
--nuda-ls-shadow-h: 0 22px 44px rgba(228, 255, 84, 0.18);
--nuda-ls-speed: 0.35s;
width: 280px;
padding: 28px 20px;
background: linear-gradient(135deg, #18181b, #09090b);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 16px;
color: #fafafa;
text-align: center;
box-shadow: var(--nuda-ls-shadow);
cursor: pointer;
transform: translateY(0);
transition:
transform var(--nuda-ls-speed) cubic-bezier(0.22, 1, 0.36, 1),
box-shadow var(--nuda-ls-speed) ease;
will-change: transform, box-shadow;
}
.nuda-lift-shadow:hover,
.nuda-lift-shadow:focus-visible {
transform: translateY(var(--nuda-ls-lift));
box-shadow: var(--nuda-ls-shadow-h);
}
.nuda-lift-shadow:focus-visible {
outline: 2px solid #e4ff54;
outline-offset: 3px;
}
.nuda-lift-shadow__title {
font-size: 1.05rem;
font-weight: 700;
margin: 0;
}
.nuda-lift-shadow__desc {
font-size: 0.85rem;
opacity: 0.65;
margin: 6px 0 0;
}
/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.nuda-lift-shadow { transition: none; }
.nuda-lift-shadow:hover,
.nuda-lift-shadow:focus-visible { transform: none; }
}How to use Lift Shadow
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.