Lift Card
A copy-paste cards & hover component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Cards & HoverHTMLCSSany framework
Lift Card
Lifts with shadow on hover
Copy into your project
HTML
<!-- Lift Card — card that lifts with shadow on hover -->
<div class="nuda-lift-card">
<h3 class="nuda-lift-card__title">Lift Card</h3>
<p class="nuda-lift-card__desc">Lifts with shadow on hover</p>
</div>CSS
/* ── Lift Card ───────────────────────────────────────────────
Customize:
--nuda-lc-bg : card background
--nuda-lc-clr : text color
--nuda-lc-radius : corner radius
--nuda-lc-lift : hover lift distance
--nuda-lc-shadow : resting shadow
--nuda-lc-shadow-h : hover shadow
--nuda-lc-speed : transition speed
──────────────────────────────────────────────────────────── */
.nuda-lift-card {
--nuda-lc-bg: linear-gradient(135deg, #1e1b4b, #312e81);
--nuda-lc-clr: #e0e7ff;
--nuda-lc-radius: 16px;
--nuda-lc-lift: -8px;
--nuda-lc-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
--nuda-lc-shadow-h: 0 20px 40px rgba(0, 0, 0, 0.35);
--nuda-lc-speed: 0.35s;
width: 280px;
padding: 28px 20px;
background: var(--nuda-lc-bg);
border-radius: var(--nuda-lc-radius);
color: var(--nuda-lc-clr);
text-align: center;
box-shadow: var(--nuda-lc-shadow);
cursor: pointer;
transition:
transform var(--nuda-lc-speed) cubic-bezier(0.22, 1, 0.36, 1),
box-shadow var(--nuda-lc-speed) ease;
will-change: transform, box-shadow;
}
.nuda-lift-card:hover {
transform: translateY(var(--nuda-lc-lift));
box-shadow: var(--nuda-lc-shadow-h);
}
.nuda-lift-card__title {
font-size: 1.05rem;
font-weight: 700;
margin: 0;
}
.nuda-lift-card__desc {
font-size: 0.85rem;
opacity: 0.7;
margin: 6px 0 0;
}
/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.nuda-lift-card {
transition: none;
}
.nuda-lift-card:hover {
transform: none;
}
}How to use Lift Card
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.