31 CSS Hero Sections26 / 31

Pure CSSMIT licensed

Isometric Room

Cozy WFH isometric — a CSS-painted desk + laptop + plant + lamp scene rendered with `transform: skewY()`. Mauve, dusty rose, and sage — the calm-productivity aesthetic.

Published

Live Demo
Try it

The code

<section class="hs-26" aria-label="Hero">
  <div class="hs-26__copy">
    <span class="hs-26__eye">/ for the home office crowd</span>
    <h2>Deep work, <em>without the doom-tabs.</em></h2>
    <p>
      A focus timer that stays in the menu bar, not your face. Three tasks a day, one calm
      afternoon.
    </p>
    <a class="hs-26__cta" href="#start">Start a session →</a>
  </div>
  <div class="hs-26__scene" aria-hidden="true">
    <div class="hs-26__desk">
      <div class="hs-26__laptop"><span></span></div>
      <div class="hs-26__mug"></div>
      <div class="hs-26__plant"><span></span><span></span></div>
      <div class="hs-26__lamp"><span></span></div>
    </div>
    <div class="hs-26__floor"></div>
  </div>
</section>
.hs-26 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  min-height: 100vh;
  padding: clamp(28px, 5vw, 56px);
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  background: radial-gradient(70% 60% at 70% 30%, rgba(216,150,180,0.18), transparent 70%), #f0e8e2;
  font-family: 'Inter', system-ui, sans-serif;
  color: #4a2840;
  box-sizing: border-box;
}

.hs-26__eye {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #8a5a78;
  margin-bottom: 14px;
}

.hs-26 h2 {
  margin: 0 0 16px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(32px, 5vw, 50px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.05;
}

.hs-26 h2 em {
  color: #8a5a78;
  font-style: italic;
}

.hs-26 p {
  margin: 0 0 22px;
  font-size: 15.5px;
  line-height: 1.6;
  color: #6a4858;
  max-width: 420px;
}

.hs-26__cta {
  display: inline-block;
  padding: 12px 22px;
  background: #4a2840;
  color: #f0e8e2;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.18s;
}

.hs-26__cta:hover {
  background: #8a5a78;
}

.hs-26__scene {
  position: relative;
  height: 320px;
  display: grid;
  place-items: center;
  perspective: 800px;
}

.hs-26__floor {
  position: absolute;
  bottom: 30px;
  left: 10%;
  right: 10%;
  height: 180px;
  background: linear-gradient(180deg, #d8b8c8 0%, #b890a8 100%);
  transform: rotateX(60deg);
  border-radius: 14px;
}

.hs-26__desk {
  position: relative;
  width: 220px;
  height: 140px;
  background: linear-gradient(135deg, #e0c8a8 0%, #b89878 100%);
  transform: rotateX(60deg) rotateZ(-30deg);
  transform-style: preserve-3d;
  border-radius: 4px;
  box-shadow: 0 22px 40px rgba(74,40,64,0.25);
}

.hs-26__laptop {
  position: absolute;
  top: 18%;
  left: 30%;
  width: 70px;
  height: 50px;
  background: #4a2840;
  border-radius: 4px;
  transform: translateZ(20px);
}

.hs-26__laptop span {
  position: absolute;
  inset: 4px;
  background: #d8a8c0;
  border-radius: 2px;
}

.hs-26__mug {
  position: absolute;
  top: 30%;
  right: 14%;
  width: 22px;
  height: 22px;
  background: #c0d8a8;
  border-radius: 4px;
  transform: translateZ(20px);
}

.hs-26__plant {
  position: absolute;
  top: -6%;
  right: 6%;
  width: 30px;
  height: 50px;
}

.hs-26__plant span {
  position: absolute;
  bottom: 0;
  width: 30px;
  height: 14px;
  background: #b89878;
  border-radius: 4px 4px 12px 12px;
  transform: translateZ(20px);
}

.hs-26__plant span:nth-child(2) {
  width: 6px;
  height: 28px;
  bottom: 12px;
  left: 12px;
  background: #6a8a6a;
  border-radius: 6px 6px 0 0;
}

.hs-26__lamp {
  position: absolute;
  top: -10%;
  left: 12%;
  width: 18px;
  height: 60px;
  background: #d8a8c0;
  border-radius: 4px;
}

.hs-26__lamp span {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 38px;
  height: 18px;
  background: #f0c0a8;
  border-radius: 50% 50% 4px 4px;
}

@media (max-width: 720px) {
  .hs-26 {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-26__cta {
    transition: none;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Hero Section from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Isometric Room
Source: https://codefronts.com/layouts/css-hero-sections/isometric-room/

Cozy WFH isometric — a CSS-painted desk + laptop + plant + lamp scene rendered with `transform: skewY()`. Mauve, dusty rose, and sage — the calm-productivity aesthetic.
## HTML
```html
<section class="hs-26" aria-label="Hero">
  <div class="hs-26__copy">
    <span class="hs-26__eye">/ for the home office crowd</span>
    <h2>Deep work, <em>without the doom-tabs.</em></h2>
    <p>
      A focus timer that stays in the menu bar, not your face. Three tasks a day, one calm
      afternoon.
    </p>
    <a class="hs-26__cta" href="#start">Start a session →</a>
  </div>
  <div class="hs-26__scene" aria-hidden="true">
    <div class="hs-26__desk">
      <div class="hs-26__laptop"><span></span></div>
      <div class="hs-26__mug"></div>
      <div class="hs-26__plant"><span></span><span></span></div>
      <div class="hs-26__lamp"><span></span></div>
    </div>
    <div class="hs-26__floor"></div>
  </div>
</section>
```
## CSS
```css
.hs-26 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  min-height: 100vh;
  padding: clamp(28px, 5vw, 56px);
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  background: radial-gradient(70% 60% at 70% 30%, rgba(216,150,180,0.18), transparent 70%), #f0e8e2;
  font-family: 'Inter', system-ui, sans-serif;
  color: #4a2840;
  box-sizing: border-box;
}

.hs-26__eye {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #8a5a78;
  margin-bottom: 14px;
}

.hs-26 h2 {
  margin: 0 0 16px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(32px, 5vw, 50px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.05;
}

.hs-26 h2 em {
  color: #8a5a78;
  font-style: italic;
}

.hs-26 p {
  margin: 0 0 22px;
  font-size: 15.5px;
  line-height: 1.6;
  color: #6a4858;
  max-width: 420px;
}

.hs-26__cta {
  display: inline-block;
  padding: 12px 22px;
  background: #4a2840;
  color: #f0e8e2;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.18s;
}

.hs-26__cta:hover {
  background: #8a5a78;
}

.hs-26__scene {
  position: relative;
  height: 320px;
  display: grid;
  place-items: center;
  perspective: 800px;
}

.hs-26__floor {
  position: absolute;
  bottom: 30px;
  left: 10%;
  right: 10%;
  height: 180px;
  background: linear-gradient(180deg, #d8b8c8 0%, #b890a8 100%);
  transform: rotateX(60deg);
  border-radius: 14px;
}

.hs-26__desk {
  position: relative;
  width: 220px;
  height: 140px;
  background: linear-gradient(135deg, #e0c8a8 0%, #b89878 100%);
  transform: rotateX(60deg) rotateZ(-30deg);
  transform-style: preserve-3d;
  border-radius: 4px;
  box-shadow: 0 22px 40px rgba(74,40,64,0.25);
}

.hs-26__laptop {
  position: absolute;
  top: 18%;
  left: 30%;
  width: 70px;
  height: 50px;
  background: #4a2840;
  border-radius: 4px;
  transform: translateZ(20px);
}

.hs-26__laptop span {
  position: absolute;
  inset: 4px;
  background: #d8a8c0;
  border-radius: 2px;
}

.hs-26__mug {
  position: absolute;
  top: 30%;
  right: 14%;
  width: 22px;
  height: 22px;
  background: #c0d8a8;
  border-radius: 4px;
  transform: translateZ(20px);
}

.hs-26__plant {
  position: absolute;
  top: -6%;
  right: 6%;
  width: 30px;
  height: 50px;
}

.hs-26__plant span {
  position: absolute;
  bottom: 0;
  width: 30px;
  height: 14px;
  background: #b89878;
  border-radius: 4px 4px 12px 12px;
  transform: translateZ(20px);
}

.hs-26__plant span:nth-child(2) {
  width: 6px;
  height: 28px;
  bottom: 12px;
  left: 12px;
  background: #6a8a6a;
  border-radius: 6px 6px 0 0;
}

.hs-26__lamp {
  position: absolute;
  top: -10%;
  left: 12%;
  width: 18px;
  height: 60px;
  background: #d8a8c0;
  border-radius: 4px;
}

.hs-26__lamp span {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 38px;
  height: 18px;
  background: #f0c0a8;
  border-radius: 50% 50% 4px 4px;
}

@media (max-width: 720px) {
  .hs-26 {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-26__cta {
    transition: none;
  }
}
```

How this works

This isometric hero section uses a two-column CSS grid (grid-template-columns: 1fr 1fr) with min-height: 100vh and align-items: center, so copy and scene stay balanced from an <iframe> embed up to a full landing-page hero. The isometric scene itself is pure CSS — no SVG, no PNG — built from stacked <div>s that get their axonometric look from a single transform: rotateX(60deg) rotateZ(-30deg) on .hs-26__desk, with transform-style: preserve-3d so the laptop, mug, plant, and lamp can lift on the Z-axis via translateZ(20px). The perspective: 800px on .hs-26__scene is what makes the tilt read as a 3D room instead of a flat skew.

The palette is the calm-productivity signal: a warm cream base (#f0e8e2) with a dusty-rose radial wash pinned upper-right (rgba(216,150,180,0.18)) that reads as "afternoon light through a window." Mauve (#8a5a78) carries the eyebrow and italic emphasis, deep aubergine (#4a2840) anchors the copy and the pill CTA, and sage (#c0d8a8) hits the mug for a single point of contrast. Type pairs Cormorant Garamond (headline, artisanal register) with JetBrains Mono (eyebrow, "maker software" signal) over Inter body — the same editorial + technical mix serious PM and dev-tools brands use.

Why it converts: isometric axonometric views collapse the ambiguity between "product" and "environment" — visitors read the room as the product's habitat, not decoration, so the mental model forms in the fold. The single-CTA layout (Start a session →) removes the double-primary trap, and the pill radius signals SaaS familiarity for productivity-tool buyers.

Make it yours

  • Recolor to your brand by editing five values: cream base (#f0e8e2), aubergine text/CTA (#4a2840), mauve accent (#8a5a78), desk gradient stops (#e0c8a8 → #b89878), and floor gradient (#d8b8c8 → #b890a8). Keep the floor 10-15% darker than the desk so the isometric depth reads.
  • Swap the serif: Cormorant Garamond signals boutique-productivity. For dev-tools → 'Source Serif Pro'. For editorial PM → 'Playfair Display'. For engineering brands → 'IBM Plex Serif'. Keep JetBrains Mono on the eyebrow either way — the mono-serif contrast is the tell.
  • Change the CTA: border-radius: 999px reads modern SaaS. Drop to border-radius: 6px for stamped-badge feel, or border-radius: 0 for brutalist dev-tool positioning. Swap the flat background for box-shadow: 0 2px 0 #2a1830 if you want the depressed-button affordance.
  • For dark mode: invert to #1a1218 aubergine base, #f0e8e2 cream text, keep #d8a8c0 as accent (raise from mauve for contrast). Dim the radial wash to rgba(216,150,180,0.06) and switch the desk gradient to #3a2a20 → #1a1208 so the isometric room stays legible.
  • For Tailwind: grid grid-cols-1 md:grid-cols-2 bg-[#f0e8e2] font-sans on the section, font-serif text-4xl md:text-5xl tracking-tight leading-[1.05] on the h2, bg-[#4a2840] hover:bg-[#8a5a78] rounded-full px-6 py-3 on the CTA. The clamp() font-sizes map to text-3xl md:text-4xl lg:text-5xl.

Gotchas — read before shipping

  • NEVER animate top, left, or the rotateX/rotateZ values on scroll — every frame triggers layout recalc for every child of .hs-26__desk because preserve-3d parents restack on any transform change. Keep the isometric transform static; animate only opacity or nested-child translateZ on the compositor thread. INP stays under 200ms.
  • The perspective: 800px on .hs-26__scene combined with fixed pixel dimensions on .hs-26__desk (220px × 140px) means the isometric room does NOT scale below ~340px viewport width — the desk clips the plant and lamp. Wrap the scene in a transform: scale() at <480px or drop the scene entirely on mobile to protect CLS.
  • The .hs-26__cta uses #f0e8e2 cream text on #4a2840 aubergine — contrast ratio ~9.8:1, passes WCAG AAA (1.4.3) even at 14px. The mauve hover (#8a5a78) drops to ~4.6:1 which passes AA large-text only. If your CTA copy is under 14px bold, deepen the hover to #6a3a58.
  • Cormorant Garamond ships true italics, so <em>without the doom-tabs.</em> renders correctly. If your fallback stack drops to Georgia the italic looks acceptable, but a system-ui fallback synthesizes oblique and looks janky. Preload the Cormorant italic subset or the emphasis word is the first thing users see mis-rendered.
  • The prefers-reduced-motion guard only disables the CTA background transition — WCAG 2.3.3 also asks you to consider vestibular impact of persistent 3D scenes. Isometric renders are static, so this passes, but if you add a hover-tilt on .hs-26__desk, guard THAT too or you fail 2.3.3 for users who don't expect object rotation.
  • In Next.js App Router, the Cormorant + JetBrains + Inter trio needs next/font/google with display: 'swap' and preload on the headline weights (600 for h2, 400 for eyebrow) — otherwise FOUT flashes the whole hero and CLS spikes past 0.1. In Vue/Nuxt use @nuxtjs/google-fonts with the same preload directive.

Techniques used in this demo

3D transforms (perspective + preserve-3d)radial-gradient()MDN ↗grid-templateMDN ↗clamp()MDN ↗place-items / place-contentMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →