<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>
Back to Snippets
Neumorphic Smart Home Dashboard CSS
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.
135