Design Ideas Collection
Debug Info:
Looking in: /vercel/path0/src/data/snippets
Files found: 4
,Parsed blocks: 4
Card Component
HTML
<div class="card">
<div class="card-header">Feature Card</div>
<div class="card-body">
<p>This is a beautiful card component with glassmorphism effect.</p>
</div>
</div>
CSS
.card {
position: absolute;
top: -50px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
padding: 20px;
max-width: 300px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
min-height: 100px;
}
.card-header {
font-size: 20px;
font-weight: 700;
margin-bottom: 7px;
color: #333;
}
.card-body p {
color: #666;
line-height: 1.5;
}
Gradient Button
HTML
<button class="gradient-btn">Click Me!</button>
CSS
.gradient-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 12px 32px;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s;
}
.gradient-btn:hover {
/*transform: translateY(-2px);*/
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
Dots Animation
HTML
<div class="happyLoader">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
CSS
.happyLoader {
display: flex;
gap: 8px;
padding: 20px;
}
.happyLoader .dot {
width: 12px;
height: 12px;
background: #3498db;
border-radius: 50%;
animation: loaderBounce 1.4s infinite ease-in-out;
}
.happyLoader .dot:nth-child(1) {
animation-delay: -0.32s;
}
.happyLoader .dot:nth-child(2) {
animation-delay: -0.16s;
}
@keyframes loaderBounce {
0%, 80%, 100% {
transform: scale(0);
opacity: 0.5;
}
40% {
transform: scale(1);
opacity: 1;
}
}
Gradient Spinner
HTML
<div class="gradient-spinner"></div>
CSS
.gradient-spinner {
width: 60px;
height: 60px;
border-radius: 50%;
background: conic-gradient(
from 0deg,
transparent 0deg 270deg,
#667eea 270deg 360deg
);
animation: rotate 1s linear infinite;
position: relative;
}
.gradient-spinner::before {
content: '';
position: absolute;
inset: 8px;
background: white;
border-radius: 50%;
}
@keyframes rotate {
100% { transform: rotate(360deg); }
}