CSS Mesh Gradient Card
複数のradial-gradientを重ねてメッシュグラデーションを動的に実現するカード。
HTML
<div class="cmgc-card">
<div class="cmgc-content">
<h3>Mesh Gradient</h3>
<p>Dynamic color blend</p>
</div>
</div>
CSS
.cmgc-card {
width: 280px;
height: 180px;
border-radius: 20px;
overflow: hidden;
position: relative;
background:
radial-gradient(circle at 20% 30%, rgba(99,102,241,0.6) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(236,72,153,0.5) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(168,85,247,0.4) 0%, transparent 60%),
#0f172a;
background-size: 200% 200%;
animation: cmgc-move 6s ease-in-out infinite alternate;
}
@keyframes cmgc-move {
0% { background-position: 0% 0%, 100% 100%, 50% 50%; }
100% { background-position: 100% 100%, 0% 0%, 60% 40%; }
}
.cmgc-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
color: #fff;
}
.cmgc-content h3 { margin: 0 0 4px; font-size: 20px; }
.cmgc-content p { margin: 0; font-size: 12px; opacity: 0.7; }