Gradient Mesh
Tropical mesh gradient — overlapping radial blobs in mango, papaya, and dragon fruit on a warm coral base. The Stripe / Linear gradient hero, but turned up to a sunset.
The code
<section class="hs-grm" aria-label="Hero">
<div class="hs-grm-blobs" aria-hidden="true">
<span></span><span></span><span></span><span></span>
</div>
<div class="hs-grm-inner">
<span class="hs-grm-eye">launch · summer collection</span>
<h2>Make your weekends <em>feel like vacation.</em></h2>
<p>
The mood-board planner that turns scattered Pinterest tabs into the trip you actually take.
</p>
<a class="hs-grm-cta" href="#start">Plan a trip →</a>
</div>
</section> <section class="hs-grm" aria-label="Hero">
<div class="hs-grm-blobs" aria-hidden="true">
<span></span><span></span><span></span><span></span>
</div>
<div class="hs-grm-inner">
<span class="hs-grm-eye">launch · summer collection</span>
<h2>Make your weekends <em>feel like vacation.</em></h2>
<p>
The mood-board planner that turns scattered Pinterest tabs into the trip you actually take.
</p>
<a class="hs-grm-cta" href="#start">Plan a trip →</a>
</div>
</section>.hs-grm {
position: relative; overflow: hidden;
display: grid; place-items: center;
width: 100%; min-height: 480px;
padding: clamp(32px, 6vw, 80px) clamp(20px, 5vw, 56px);
background: #ff5e62;
font-family: 'Inter', system-ui, sans-serif;
color: #fff;
box-sizing: border-box;
contain: layout paint;
}
.hs-grm-blobs { position: absolute; inset: 0; }
.hs-grm-blobs span {
position: absolute; border-radius: 50%; filter: blur(60px);
animation: hs-grm-drift 16s ease-in-out infinite alternate;
}
.hs-grm-blobs span:nth-child(1) { top: -10%; left: 10%; width: 460px; height: 460px;
background: radial-gradient(circle, #ffd23f 0%, transparent 70%); }
.hs-grm-blobs span:nth-child(2) { top: 20%; right: 0; width: 420px; height: 420px;
background: radial-gradient(circle, #ee4266 0%, transparent 70%); animation-delay: -4s; }
.hs-grm-blobs span:nth-child(3) { bottom: 0; left: 30%; width: 460px; height: 460px;
background: radial-gradient(circle, #ff7e5f 0%, transparent 70%); animation-delay: -8s; }
.hs-grm-blobs span:nth-child(4) { top: 30%; left: -8%; width: 360px; height: 360px;
background: radial-gradient(circle, #ffa552 0%, transparent 70%); animation-delay: -12s; }
@keyframes hs-grm-drift {
0% { transform: translate(0,0) scale(1); }
50% { transform: translate(40px,-30px) scale(1.08); }
100% { transform: translate(-40px,40px) scale(0.96); }
}
.hs-grm-inner { position: relative; z-index: 1; max-width: 640px; text-align: center; }
.hs-grm-eye {
display: inline-block; padding: 5px 14px;
background: rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.4);
border-radius: 999px;
font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 22px;
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hs-grm h2 {
margin: 0 0 18px;
font-size: clamp(34px, 6vw, 60px);
font-weight: 900; letter-spacing: -0.025em; line-height: 1.02;
text-shadow: 0 2px 24px rgba(238,66,102,0.25);
}
.hs-grm h2 em { font-style: italic; font-weight: 800; color: #fff5d2; }
.hs-grm p { margin: 0 auto 28px; font-size: 17px; line-height: 1.55; max-width: 480px; opacity: 0.95; }
.hs-grm-cta {
display: inline-block; padding: 14px 26px;
background: #fff; color: #ee4266;
border-radius: 999px; text-decoration: none;
font-weight: 700; font-size: 15px;
box-shadow: 0 12px 30px rgba(238,66,102,0.35);
transition: transform 0.18s;
}
.hs-grm-cta:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
.hs-grm-blobs span { animation: none; }
.hs-grm-cta { transition: none; }
} .hs-grm {
position: relative; overflow: hidden;
display: grid; place-items: center;
width: 100%; min-height: 480px;
padding: clamp(32px, 6vw, 80px) clamp(20px, 5vw, 56px);
background: #ff5e62;
font-family: 'Inter', system-ui, sans-serif;
color: #fff;
box-sizing: border-box;
contain: layout paint;
}
.hs-grm-blobs { position: absolute; inset: 0; }
.hs-grm-blobs span {
position: absolute; border-radius: 50%; filter: blur(60px);
animation: hs-grm-drift 16s ease-in-out infinite alternate;
}
.hs-grm-blobs span:nth-child(1) { top: -10%; left: 10%; width: 460px; height: 460px;
background: radial-gradient(circle, #ffd23f 0%, transparent 70%); }
.hs-grm-blobs span:nth-child(2) { top: 20%; right: 0; width: 420px; height: 420px;
background: radial-gradient(circle, #ee4266 0%, transparent 70%); animation-delay: -4s; }
.hs-grm-blobs span:nth-child(3) { bottom: 0; left: 30%; width: 460px; height: 460px;
background: radial-gradient(circle, #ff7e5f 0%, transparent 70%); animation-delay: -8s; }
.hs-grm-blobs span:nth-child(4) { top: 30%; left: -8%; width: 360px; height: 360px;
background: radial-gradient(circle, #ffa552 0%, transparent 70%); animation-delay: -12s; }
@keyframes hs-grm-drift {
0% { transform: translate(0,0) scale(1); }
50% { transform: translate(40px,-30px) scale(1.08); }
100% { transform: translate(-40px,40px) scale(0.96); }
}
.hs-grm-inner { position: relative; z-index: 1; max-width: 640px; text-align: center; }
.hs-grm-eye {
display: inline-block; padding: 5px 14px;
background: rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.4);
border-radius: 999px;
font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 22px;
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hs-grm h2 {
margin: 0 0 18px;
font-size: clamp(34px, 6vw, 60px);
font-weight: 900; letter-spacing: -0.025em; line-height: 1.02;
text-shadow: 0 2px 24px rgba(238,66,102,0.25);
}
.hs-grm h2 em { font-style: italic; font-weight: 800; color: #fff5d2; }
.hs-grm p { margin: 0 auto 28px; font-size: 17px; line-height: 1.55; max-width: 480px; opacity: 0.95; }
.hs-grm-cta {
display: inline-block; padding: 14px 26px;
background: #fff; color: #ee4266;
border-radius: 999px; text-decoration: none;
font-weight: 700; font-size: 15px;
box-shadow: 0 12px 30px rgba(238,66,102,0.35);
transition: transform 0.18s;
}
.hs-grm-cta:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
.hs-grm-blobs span { animation: none; }
.hs-grm-cta { transition: none; }
}