Design Styles Hard

3D Design

Depth-rich interfaces with CSS 3D transforms, perspective effects, layered cards, and dynamic shadows for an immersive spatial feel.

Open in Lab

html css javascript

Targets: JS HTML

Code

:root {
  --bg: #0c0c14;
  --card-bg: rgba(255, 255, 255, 0.04);
  --card-border: rgba(255, 255, 255, 0.1);
  --text: rgba(255, 255, 255, 0.92);
  --text-muted: rgba(255, 255, 255, 0.5);
  --gradient-warm: linear-gradient(135deg, #f97316, #ec4899);
  --gradient-cool: linear-gradient(135deg, #3b82f6, #8b5cf6);
  --gradient-card: linear-gradient(135deg, rgba(249, 115, 22, 0.08), rgba(139, 92, 246, 0.08));
  --shadow-close: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-far: 0 20px 60px rgba(0, 0, 0, 0.5);
  --radius: 20px;
  --font: "Inter", system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  background: var(--bg);
  background-image: radial-gradient(
      ellipse at 30% 20%,
      rgba(249, 115, 22, 0.06) 0%,
      transparent 50%
    ), radial-gradient(ellipse at 70% 80%, rgba(139, 92, 246, 0.06) 0%, transparent 50%);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Page ── */
.page {
  max-width: 680px;
  margin: 0 auto;
  padding: 48px 24px 80px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  perspective: 1000px;
}

/* ── Header ── */
.header {
  text-align: center;
}

.header__pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 20px;
}

.header__title {
  font-size: clamp(44px, 10vw, 80px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

.header__title span {
  background: var(--gradient-warm);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header__tagline {
  margin-top: 14px;
  font-size: 15px;
  color: var(--text-muted);
}

/* ── 3D Card ── */
.card-3d {
  position: relative;
  background: var(--gradient-card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-close), var(--shadow-far);
  overflow: hidden;
  transition: box-shadow 0.4s ease;
  transform-style: preserve-3d;
}

.card-3d__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.04) 45%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 55%,
    transparent 60%
  );
  pointer-events: none;
  transition: opacity 0.4s ease;
  opacity: 0;
}

.card-3d:hover .card-3d__shine {
  opacity: 1;
}

/* ── Tilt container ── */
.tilt-container {
  perspective: 800px;
  transform-style: preserve-3d;
}

.card-section {
  display: flex;
  justify-content: center;
  perspective: 800px;
}

/* ── Profile card ── */
.profile-card {
  max-width: 400px;
  width: 100%;
}

.card__top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.avatar-3d {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--gradient-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(249, 115, 22, 0.35);
  transform: translateZ(20px);
}

.card__info {
  flex: 1;
}

.card__name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.card__role {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 3px;
}

.depth-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--gradient-cool);
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  transform: translateZ(10px);
}

.card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.stat-3d {
  text-align: center;
  padding: 14px 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-3d:hover {
  transform: translateY(-3px) translateZ(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.stat__value {
  display: block;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.stat__label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 3px;
}

/* ── Stacked cards section ── */
.stack-section {
  padding: 20px 0;
}

.card-stack {
  position: relative;
  max-width: 500px;
  margin: 0 auto;
  height: auto;
}

.stack-card {
  width: 100%;
}

.stack-card--back {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: rotate(-3deg) translateY(8px) scale(0.94);
  opacity: 0.3;
  z-index: 1;
}

.stack-card--mid {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: rotate(-1.5deg) translateY(4px) scale(0.97);
  opacity: 0.5;
  z-index: 2;
}

.stack-card--front {
  position: relative;
  z-index: 3;
}

.stack-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stack-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* ── Buttons ── */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.btn {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  padding: 11px 20px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn--gradient {
  background: var(--gradient-warm);
  color: white;
  box-shadow: 0 4px 16px rgba(249, 115, 22, 0.3);
}

.btn--gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(249, 115, 22, 0.45);
}

.btn--glass {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border: 1px solid var(--card-border);
}

.btn--glass:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.btn--outline {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.btn--outline:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--text);
  transform: translateY(-1px);
}

/* ── Input card ── */
.input-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.input-3d {
  font-family: var(--font);
  font-size: 14px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  color: var(--text);
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.input-3d:focus {
  border-color: rgba(249, 115, 22, 0.5);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1), 0 4px 16px rgba(249, 115, 22, 0.1);
}

.input-3d::placeholder {
  color: rgba(255, 255, 255, 0.2);
}

/* ── Badges ── */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.badge {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 100px;
  border: 1px solid;
  transition: transform 0.2s ease;
}

.badge:hover {
  transform: translateY(-1px);
}

.badge--warm {
  background: rgba(249, 115, 22, 0.1);
  border-color: rgba(249, 115, 22, 0.25);
  color: #fb923c;
}

.badge--cool {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.25);
  color: #93c5fd;
}

.badge--neutral {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text-muted);
}

/* ── Responsive ── */
@media (max-width: 520px) {
  .page {
    padding: 32px 16px 48px;
    gap: 28px;
  }

  .header__title {
    font-size: clamp(36px, 12vw, 44px);
  }

  .card-3d {
    padding: 20px;
  }

  .profile-card {
    max-width: 100%;
  }

  .card__top {
    gap: 12px;
  }

  .avatar-3d {
    width: 44px;
    height: 44px;
    font-size: 14px;
  }

  .card__name {
    font-size: 16px;
  }

  .stat__value {
    font-size: 18px;
  }

  .stat-3d {
    padding: 10px 4px;
  }

  .stack-card--back,
  .stack-card--mid {
    display: none;
  }

  .btn {
    font-size: 12px;
    padding: 10px 16px;
  }
}

// 3D Design — Mouse-tracking tilt effect
document.querySelectorAll(".tilt-container, .card-section").forEach((container) => {
  const card = container.querySelector(".card-3d");
  if (!card) return;

  container.addEventListener("mousemove", (e) => {
    const rect = container.getBoundingClientRect();
    const x = (e.clientX - rect.left) / rect.width;
    const y = (e.clientY - rect.top) / rect.height;

    const rotateX = (0.5 - y) * 12;
    const rotateY = (x - 0.5) * 12;

    card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
    card.style.boxShadow = `
      ${-rotateY * 2}px ${rotateX * 2}px 12px rgba(0,0,0,0.4),
      ${-rotateY * 4}px ${rotateX * 4}px 40px rgba(0,0,0,0.3)
    `;

    // Move shine
    const shine = card.querySelector(".card-3d__shine");
    if (shine) {
      shine.style.opacity = "1";
      shine.style.background = `linear-gradient(
        ${105 + (x - 0.5) * 40}deg,
        transparent 35%,
        rgba(255,255,255,0.04) 42%,
        rgba(255,255,255,0.1) 50%,
        rgba(255,255,255,0.04) 58%,
        transparent 65%
      )`;
    }
  });

  container.addEventListener("mouseleave", () => {
    card.style.transform = "";
    card.style.boxShadow = "";
    const shine = card.querySelector(".card-3d__shine");
    if (shine) {
      shine.style.opacity = "0";
    }
  });
});

// Stat hover 3D pop
document.querySelectorAll(".stat-3d").forEach((stat) => {
  stat.addEventListener("mouseenter", () => {
    stat.style.transform = "translateY(-4px) translateZ(16px) scale(1.03)";
  });
  stat.addEventListener("mouseleave", () => {
    stat.style.transform = "";
  });
});

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="style.css" />
    <title>3D Design — Design Style</title>
  </head>
  <body>
    <div class="page">
      <!-- Header -->
      <header class="header">
        <div class="header__pill">Spatial Interface</div>
        <h1 class="header__title">3D<br /><span>Design</span></h1>
        <p class="header__tagline">Depth, perspective, and spatial interactions.</p>
      </header>

      <!-- 3D Profile Card -->
      <section class="card-section">
        <div class="tilt-container" id="tiltCard">
          <div class="card-3d profile-card">
            <div class="card-3d__shine" aria-hidden="true"></div>
            <div class="card__top">
              <div class="avatar-3d">
                <span>EV</span>
              </div>
              <div class="card__info">
                <h2 class="card__name">Elena Voss</h2>
                <p class="card__role">Spatial Designer</p>
              </div>
              <div class="depth-badge">3D</div>
            </div>
            <div class="card__stats">
              <div class="stat-3d">
                <span class="stat__value">1.2K</span>
                <span class="stat__label">Scenes</span>
              </div>
              <div class="stat-3d">
                <span class="stat__value">4.9</span>
                <span class="stat__label">Rating</span>
              </div>
              <div class="stat-3d">
                <span class="stat__value">86k</span>
                <span class="stat__label">Views</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Stacked cards -->
      <section class="stack-section">
        <div class="card-stack">
          <div class="card-3d stack-card stack-card--back" aria-hidden="true">
            <div class="card-3d__shine"></div>
          </div>
          <div class="card-3d stack-card stack-card--mid" aria-hidden="true">
            <div class="card-3d__shine"></div>
          </div>
          <div class="card-3d stack-card stack-card--front">
            <div class="card-3d__shine"></div>
            <div class="stack-content">
              <h3 class="stack-title">Controls</h3>
              <div class="button-row">
                <button class="btn btn--gradient">Launch Scene</button>
                <button class="btn btn--glass">Preview</button>
                <button class="btn btn--outline">Export →</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Input card -->
      <section class="tilt-container" id="tiltInput">
        <div class="card-3d input-card">
          <div class="card-3d__shine"></div>
          <div class="field">
            <label class="field__label" for="searchInput">Search Scenes</label>
            <input class="input-3d" id="searchInput" type="text" placeholder="Environments, objects, materials..." />
          </div>
          <div class="badge-row">
            <span class="badge badge--warm">Depth</span>
            <span class="badge badge--cool">Perspective</span>
            <span class="badge badge--neutral">Shadows</span>
            <span class="badge badge--warm">Spatial</span>
          </div>
        </div>
      </section>
    </div>

    <script src="script.js"></script>
  </body>
</html>

3D Design

The 3D Design style uses CSS perspective, transform-style: preserve-3d, and layered depth cues to create interfaces that feel like they exist in three-dimensional space. Cards tilt and shift in response to mouse movement, shadows elongate and contract dynamically, and stacked layers create a genuine sense of depth.

The foundation is a perspective container that enables child elements to rotate in 3D space. Cards have multiple shadow layers — a close contact shadow plus a distant ambient shadow — that adjust based on the card’s tilt angle. This creates a physically plausible lighting model that makes elements feel tangible.

Color schemes typically use rich gradients as card backgrounds, with the dark body providing contrast. Hover interactions feature smooth 3D rotations (typically 5–12 degrees on X/Y axes) with spring-like easing for a satisfying physical feel.

Key characteristics

CSS perspective container (800–1200px) enabling 3D transforms
Mouse-tracking tilt effect on cards (rotateX/rotateY)
Multi-layer dynamic shadows that respond to tilt angle
Gradient card backgrounds for visual richness
transform-style: preserve-3d for true depth stacking
Smooth spring-like transitions on hover
Layered card composition with offset elements

When to use it

3D Design works well for portfolio showcases, product cards, interactive galleries, hero sections, and premium landing pages. The mouse-tracking interaction requires pointer devices, so consider providing flat fallbacks for touch devices. Best used for focal-point elements rather than entire page layouts.