About this snippet

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.

Size
3.8 KB
Uses
HTML, CSS
Loads
placehold.co
Views
315

Collections

Related snippets

<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>
*, *::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);
  }
}

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save