About this snippet

Upgrade your interface with a neumorphic smart home dashboard. We crafted soft shadows for the buttons, which gives the controls a very realistic and tactile feel.

Size
3.5 KB
Uses
HTML, CSS
Loads
Nothing external
Views
235

Collections

Related snippets

<div class="dashboard-wrap">
  <div class="header">
    <h2>Living Room</h2>
    <p>3 Devices Active</p>
  </div>
  
  <div class="controls-grid">
    <div class="neu-card active">
      <div class="icon-box">
        <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"></path></svg>
      </div>
      <h4>Main Lights</h4>
      <span class="status">ON</span>
    </div>
    
    <div class="neu-card">
      <div class="icon-box">
        <svg viewBox="0 0 24 24" width="24" height="24" 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>
      </div>
      <h4>Temperature</h4>
      <span class="status">72°F</span>
    </div>
    
    <div class="neu-card active">
      <div class="icon-box">
        <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>
      </div>
      <h4>Speakers</h4>
      <span class="status">Playing</span>
    </div>
    
    <div class="neu-card">
      <div class="icon-box">
        <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
      </div>
      <h4>Front Door</h4>
      <span class="status">Locked</span>
    </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";
  background: #e0e5ec;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 20px;
}

.dashboard-wrap {
  width: 100%;
  max-width: 400px;
}

.header {
  margin-bottom: 30px;
  color: #374151;
}

.header h2 {
  margin: 0 0 4px 0;
  font-size: 1.75rem;
}

.header p {
  margin: 0;
  color: #6b7280;
}

.controls-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.neu-card {
  background: #e0e5ec;
  border-radius: 20px;
  padding: 24px 20px;
  box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.neu-card:active {
  box-shadow: inset 6px 6px 10px rgba(163, 177, 198, 0.6), inset -6px -6px 10px rgba(255, 255, 255, 0.5);
}

.neu-card.active {
  background: #3b82f6;
  color: #ffffff;
  box-shadow: 6px 6px 12px rgba(59, 130, 246, 0.3), -6px -6px 12px rgba(255, 255, 255, 0.5);
}

.icon-box {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #e0e5ec;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #6b7280;
  box-shadow: 4px 4px 8px rgba(163, 177, 198, 0.6), -4px -4px 8px rgba(255, 255, 255, 0.5);
  margin-bottom: 20px;
}

.neu-card.active .icon-box {
  background: #3b82f6;
  color: #ffffff;
  box-shadow: inset 4px 4px 8px rgba(29, 78, 216, 0.5), inset -4px -4px 8px rgba(96, 165, 250, 0.5);
}

.neu-card h4 {
  margin: 0 0 8px 0;
  font-size: 1rem;
  color: #374151;
}

.neu-card.active h4 {
  color: #ffffff;
}

.status {
  font-size: 0.875rem;
  color: #9ca3af;
  font-weight: 500;
}

.neu-card.active .status {
  color: #bfdbfe;
}

      

          


    

    
  

  















  
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