Back to Snippets

Spatial UI Glassmorphism Widgets CSS

Replicate the Apple Vision Pro aesthetic with spatial UI glassmorphism widgets. We layered massive background blur filters and intense drop shadows to create the illusion of floating physical panes.

228

#css

#spatial ui

#glassmorphism

#widgets

#apple vision

#3d

#floating

#blur

#modern

Run /HTML *CSS ()JS Output Console0 Live Updates Focus

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

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin: 0;
  /* Immersive panoramic background */
  background: url("https://placehold.co/1920x1080/0f172a/1e293b?text=Panoramic+View") center/cover fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 40px;
}

.spatial-environment {
  display: flex;
  align-items: center;
  gap: 30px;
  perspective: 1500px;
  width: 100%;
  max-width: 1100px;
}

.spatial-widget {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  padding: 24px;
  color: #ffffff;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
  cursor: pointer;
}

/* 3D Arc Positioning */
.widget-left {
  flex: 1;
  height: 200px;
  transform: rotateY(15deg) translateZ(-50px);
}

.widget-center {
  flex: 1.5;
  height: 300px;
  transform: translateZ(50px);
  z-index: 10;
}

.widget-right {
  flex: 1;
  height: 200px;
  transform: rotateY(-15deg) translateZ(-50px);
}

.spatial-widget:hover {
  transform: translateZ(80px) rotateY(0deg) scale(1.05);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  z-index: 20;
}

.widget-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-weight: 600;
  opacity: 0.8;
}

.center-align {
  justify-content: center;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.red { background: #ef4444; }
.yellow { background: #f59e0b; }
.green { background: #10b981; }

.time {
  font-size: 1.25rem;
  letter-spacing: 2px;
}

.widget-body h2 {
  margin: 0 0 10px 0;
  font-size: 2.2rem;
}

.widget-body h3 {
  margin: 0 0 8px 0;
  font-size: 1.25rem;
}

.widget-body .money {
  font-size: 2rem;
  margin: 0 0 4px 0;
}

.widget-body p {
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 20px 0;
  line-height: 1.5;
}

.spatial-btn {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 12px 24px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}

.spatial-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

@media (max-width: 900px) {
  .spatial-environment {
    flex-direction: column;
    perspective: none;
  }
  .widget-left, .widget-center, .widget-right {
    transform: none;
    width: 100%;
    height: auto;
  }
  .spatial-widget:hover {
    transform: translateY(-10px);
  }
}

<div class="spatial-environment">
  
  <div class="spatial-widget widget-left">
    <div class="widget-header">
      <div class="dot red"></div>
      <div class="dot yellow"></div>
      <div class="dot green"></div>
    </div>
    <div class="widget-body">
      <h3>System Stats</h3>
      <p>Performance is optimal.</p>
    </div>
  </div>
  
  <div class="spatial-widget widget-center">
    <div class="widget-header center-align">
      <span class="time">14:30</span>
    </div>
    <div class="widget-body">
      <h2>Good Afternoon</h2>
      <p>You have 3 upcoming meetings scheduled for today.</p>
      <button class="spatial-btn">View Calendar</button>
    </div>
  </div>
  
  <div class="spatial-widget widget-right">
    <div class="widget-header">
      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
      <span>Finances</span>
    </div>
    <div class="widget-body">
      <h3 class="money">$12,450</h3>
      <p>Available Balance</p>
    </div>
  </div>
  
</div>

Spatial UI Glassmorphism Widgets CSS

Share Code Snippet