Techniques
Watercolor sky gradient hero
Signature Ghibli cumulus-sky wash used behind hero content, with a soft paper-edge fade at the bottom so foreground art settles onto the page.
.ghibli-sky {
background:
radial-gradient(ellipse 80% 50% at 20% 30%, rgba(255,255,255,0.8), transparent 60%),
radial-gradient(ellipse 60% 40% at 75% 40%, rgba(255,255,255,0.6), transparent 55%),
linear-gradient(180deg, #87CEEB 0%, #5BA3D9 65%, #F5F0E8 100%);
position: relative;
}
.ghibli-sky::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 120px;
background: linear-gradient(180deg, transparent, #F5F0E8);
pointer-events: none;
}
Watercolor-edged paper card
A card that looks hand-torn and laid on paper — subtle grain, warm ink shadow, soft inner light.
.ghibli-card {
background:
radial-gradient(ellipse at top left, rgba(255,255,255,0.9), transparent 60%),
#FFFFFF;
border: 1px solid #E8E0D2;
border-radius: 12px;
padding: 24px;
box-shadow:
0 2px 12px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
background-image:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.23 0 0 0 0 0.19 0 0 0 0 0.16 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
radial-gradient(ellipse at top left, rgba(255,255,255,0.9), transparent 60%),
linear-gradient(#FFFFFF, #FFFFFF);
}
Drifting cloud accent
Slow, ambient motion for hero backgrounds — soft white shapes drifting across the sky wash, disabled under reduced-motion.
@keyframes drift {
0% { transform: translateX(-10%); opacity: 0.7; }
50% { opacity: 0.9; }
100% { transform: translateX(110%); opacity: 0.7; }
}
.ghibli-cloud {
position: absolute;
width: 240px;
height: 80px;
border-radius: 9999px;
background: radial-gradient(ellipse at center, rgba(255,255,255,0.95), rgba(255,255,255,0) 70%);
filter: blur(2px);
animation: drift 40s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.ghibli-cloud { animation: none; }
}