Isometric Room — Playground

{CF} CodeFronts Back to CSS Hero Sections Isometric Room Pure CSS

Edit any tab — preview updates live

.hs-iso {
  width: 100%;
  min-height: clamp(220px, 30vh, 100vh);
  padding: clamp(20px, 4vh, 60px) clamp(16px, 4vw, 40px);
  background: linear-gradient(135deg, #0e0e16 0%, #1f0f3a 100%);
  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-iso { grid-template-columns: 1fr; } }
.hs-iso-eye {
  font-family: monospace; font-size: clamp(9px, 1.3vw, 11px);
  letter-spacing: 0.14em; color: #a78bfa; text-transform: uppercase;
}
.hs-iso-l h1 {
  margin: 8px 0; font-size: clamp(20px, 4.5vw, 46px);
  font-weight: 800; line-height: 1.1; letter-spacing: -0.02em;
}
.hs-iso-l p { margin: 0 0 12px; font-size: clamp(11px, 1.5vw, 15px); color: #b8b6d4; }
.hs-iso-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-iso-cta:hover { filter: brightness(1.12); }
.hs-iso-r { display: flex; justify-content: center; }
.hs-iso-r svg {
  width: clamp(160px, 30vw, 260px); height: auto; display: block;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,0.4));
}

<section class="hs-iso">
  <div class="hs-iso-l">
    <span class="hs-iso-eye">For modern teams</span>
    <h1>Workspaces that build themselves.</h1>
    <p>Components, layouts, and themes — assembled by the team that uses them most.</p>
    <a class="hs-iso-cta" href="#">Start building →</a>
  </div>
  <div class="hs-iso-r">
    <svg viewBox="0 0 220 200" aria-hidden="true">
      <defs>
        <linearGradient id="hs-iso-f" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#a78bfa"/>
          <stop offset="100%" stop-color="#7c6cff"/>
        </linearGradient>
        <linearGradient id="hs-iso-w1" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#3a2a6a"/>
          <stop offset="100%" stop-color="#1a1438"/>
        </linearGradient>
        <linearGradient id="hs-iso-w2" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#5a4a8a"/>
          <stop offset="100%" stop-color="#2a1f5c"/>
        </linearGradient>
      </defs>
      
      <polygon points="110,180 200,140 110,100 20,140" fill="url(#hs-iso-f)"/>
      
      <polygon points="110,100 200,55 200,140 110,100" fill="url(#hs-iso-w1)"/>
      <polygon points="110,100 20,55 20,140 110,100" fill="url(#hs-iso-w2)"/>
      
      <polygon points="110,135 170,105 110,80 50,105" fill="#ff6c8a" opacity="0.85"/>
      <polygon points="50,105 50,115 110,90 110,80" fill="#c54a6a"/>
      <polygon points="170,105 170,115 110,90 110,80" fill="#c54a6a"/>
      
      <polygon points="105,82 145,62 145,42 105,62" fill="#0e0e16"/>
      <polygon points="108,80 142,62 142,46 108,62" fill="#2eb88a"/>
      
      <polygon points="80,140 100,128 100,150 80,162" fill="#f5a84a"/>
      <polygon points="80,140 80,162 70,160 70,142" fill="#c5803a"/>
      
      <line x1="155" y1="105" x2="155" y2="50" stroke="#fff5d4" stroke-width="2"/>
      <circle cx="155" cy="48" r="6" fill="#fff5d4"/>
    </svg>
  </div>
</section>

Live preview Ready