Card Morph
A copy-paste morphing shapes component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Morphing ShapesHTMLCSSany framework
Hover
Copy into your project
HTML
<!-- Card Morph — square morphs to a circle on hover/focus -->
<div class="nuda-morph-card" tabindex="0" role="button" aria-label="Morphing card">
<span class="nuda-morph-card__label">Hover</span>
</div>CSS
/* Card Morph
A square smoothly rounds into a circle and scales up on hover/focus.
Customize: --morph-card-size, --morph-card-start, --morph-card-end */
.nuda-morph-card {
--morph-card-size: 90px;
--morph-card-start: #e4ff54;
--morph-card-end: #a3b830;
display: flex;
align-items: center;
justify-content: center;
width: var(--morph-card-size);
height: var(--morph-card-size);
background: linear-gradient(135deg, var(--morph-card-start), var(--morph-card-end));
border-radius: 6px;
cursor: pointer;
outline: none;
transition: border-radius 0.5s cubic-bezier(0.4, 0.2, 0.2, 1),
transform 0.5s cubic-bezier(0.4, 0.2, 0.2, 1);
will-change: border-radius, transform;
}
.nuda-morph-card__label {
color: #09090b;
font-weight: 700;
font-size: 0.8rem;
}
.nuda-morph-card:hover,
.nuda-morph-card:focus-visible {
border-radius: 50%;
transform: scale(1.1);
}
.nuda-morph-card:focus-visible {
outline: 2px solid var(--morph-card-start);
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
.nuda-morph-card {
transition: none;
}
.nuda-morph-card:hover,
.nuda-morph-card:focus-visible {
transform: none;
}
}How to use Card Morph
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.