Back to Snippets

Spatial UI Glassmorphism Widgets CSS

Three translucent widgets sit in front of a background image. The outer two angle inward and sit further back, the middle one comes forward, and hovering any of them brings it toward you.

The arc is perspective on the container plus a rotateY and translateZ on each panel. The glass is a backdrop-filter blur over a low opacity white fill, with an inset white box-shadow along the top edge to fake the lit rim you see on real frosted panels.

The background uses fixed attachment, so the panels blur the image rather than the flat body color behind it. Below 900 pixels a media query stacks the widgets, clears every transform and sets perspective to none, since a 3D arc on a narrow screen mostly just clips off the sides.

272

#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