Product Shot Hero — Playground

{CF} CodeFronts Back to CSS Hero Sections Product Shot Hero Pure CSS

Edit any tab — preview updates live

.hs-prd {
  width: 100%;
  min-height: clamp(220px, 30vh, 100vh);
  padding: clamp(20px, 4vh, 60px) clamp(16px, 4vw, 40px);
  background: radial-gradient(60% 60% at 50% 0%, rgba(124,108,255,0.18), transparent 70%), #0e0e16;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 3vw, 32px); align-items: center;
  font-family: system-ui, sans-serif; color: #f0eeff;
}
@media (max-width: 720px) { .hs-prd { grid-template-columns: 1fr; text-align: center; } }
.hs-prd-tag {
  display: inline-block;
  font-family: monospace; font-size: clamp(9px, 1.3vw, 11px);
  letter-spacing: 0.12em; color: #a78bfa; text-transform: uppercase;
  padding: 3px 10px; border-radius: 12px;
  background: rgba(124,108,255,0.12); border: 1px solid rgba(124,108,255,0.3);
}
.hs-prd-l h1 {
  margin: 8px 0; font-size: clamp(28px, 6vw, 64px);
  font-weight: 900; line-height: 1; letter-spacing: -0.03em;
  background: linear-gradient(135deg, #fff, #a78bfa);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hs-prd-l p { margin: 0 0 12px; font-size: clamp(11px, 1.6vw, 16px); color: #b8b6d4; }
.hs-prd-cta {
  display: inline-block; padding: 9px 20px; border-radius: 7px;
  background: linear-gradient(135deg, #7c6cff, #a78bfa); color: #fff;
  font-size: clamp(11px, 1.5vw, 14px); font-weight: 700;
  text-decoration: none; transition: filter 0.15s;
}
.hs-prd-cta:hover { filter: brightness(1.12); }
.hs-prd-from { margin-top: 8px; font-size: clamp(10px, 1.3vw, 12px); color: #b8b6d4; }
.hs-prd-from strong { color: #f0eeff; font-size: clamp(13px, 1.8vw, 16px); }
.hs-prd-r {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 200px;
}
.hs-prd-shot { width: clamp(120px, 28vw, 200px); }
.hs-prd-shot svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 20px 40px rgba(124,108,255,0.4)); }
.hs-prd-bdg {
  position: absolute;
  font-family: monospace; font-size: clamp(9px, 1.2vw, 11px); font-weight: 700;
  padding: 4px 10px; border-radius: 14px;
  background: rgba(255,255,255,0.06); color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  white-space: nowrap;
  animation: hs-prd-float 3.6s ease-in-out infinite;
}
.hs-prd-b1 { top: 10%; left: 0; animation-delay: -0.5s; border-color: rgba(46,184,138,0.4); color: #2eb88a; }
.hs-prd-b2 { top: 50%; right: 0; animation-delay: -1.5s; border-color: rgba(255,108,138,0.4); color: #ff6c8a; }
.hs-prd-b3 { bottom: 12%; left: 8%; animation-delay: -2.5s; border-color: rgba(245,168,74,0.4); color: #f5a84a; }
@keyframes hs-prd-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) { .hs-prd-bdg { animation: none; } }

<section class="hs-prd">
  <div class="hs-prd-l">
    <span class="hs-prd-tag">New · Fall 2026</span>
    <h1>Edge One.</h1>
    <p>Lighter than air. Faster than thought.</p>
    <a class="hs-prd-cta" href="#">Pre-order →</a>
    <div class="hs-prd-from">From <strong>$899</strong></div>
  </div>
  <div class="hs-prd-r">
    <div class="hs-prd-shot">
      <svg viewBox="0 0 200 280" aria-hidden="true">
        <defs>
          <linearGradient id="hs-prd-d" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="#a78bfa"/>
            <stop offset="100%" stop-color="#7c6cff"/>
          </linearGradient>
        </defs>
        <rect x="40" y="20" width="120" height="240" rx="22" fill="url(#hs-prd-d)" stroke="#fff" stroke-width="2" stroke-opacity="0.18"/>
        <rect x="50" y="35" width="100" height="200" rx="14" fill="#0e0e16"/>
        <circle cx="100" cy="135" r="32" fill="rgba(255,255,255,0.08)"/>
        <text x="100" y="142" font-family="system-ui,sans-serif" font-size="22" fill="#fff" text-anchor="middle" font-weight="800">↑</text>
      </svg>
    </div>
    <span class="hs-prd-bdg hs-prd-b1">2× faster</span>
    <span class="hs-prd-bdg hs-prd-b2">−40% weight</span>
    <span class="hs-prd-bdg hs-prd-b3">All-day battery</span>
  </div>
</section>

Live preview Ready