Liquid Morphing Blob Background Card

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="blob-wrapper"><div class="blob-bg"></div><form class="blob-card" onsubmit="return false;"><h3>Sign In</h3><input type="email" placeholder="Email"><input type="password" placeholder="Password"><button type="submit">Sign In</button></form></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.blob-wrapper { position: relative; width: 210px; height: 210px; display: flex; align-items: center; justify-content: center; margin: auto; }
.blob-bg { position: absolute; width: 180px; height: 180px; background: linear-gradient(135deg, #a855f7, #06b6d4); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; animation: morphBlob 6s ease-in-out infinite alternate; filter: blur(10px); opacity: 0.7; }
@keyframes morphBlob { 0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: rotate(0deg); } 100% { border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%; transform: rotate(180deg); } }
.blob-card { position: relative; width: 190px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); border-radius: 16px; padding: 16px; box-shadow: 0 15px 35px rgba(0,0,0,0.1); font-family: system-ui, sans-serif; text-align: center; box-sizing: border-box; }
.blob-card h3 { margin: 0 0 10px; font-size: 13px; font-weight: 800; color: #0f172a; }
.blob-card input { width: 100%; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px; font-size: 8px; outline: none; margin-bottom: 6px; box-sizing: border-box; }
.blob-card button { width: 100%; background: #0f172a; color: #fff; border: none; border-radius: 6px; padding: 7px; font-size: 8px; font-weight: 800; cursor: pointer; margin-top: 4px; }