<div class="weather-app">
<!-- Glowing Background Orbs -->
<div class="bg-orb orb-yellow"></div>
<div class="bg-orb orb-blue"></div>
<!-- Main Glass Dashboard -->
<div class="glass-dashboard">
<div class="current-weather">
<div class="location">San Francisco, CA</div>
<div class="temp-display">
<h1>72°</h1>
<div class="weather-icon">
<!-- SVG Sun -->
<svg viewBox="0 0 24 24" width="60" height="60" fill="none" stroke="#fef08a" stroke-width="2">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
</div>
</div>
<div class="condition">Sunny & Clear</div>
</div>
<div class="divider"></div>
<div class="forecast-row">
<div class="forecast-item">
<span>Mon</span>
<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#fef08a" stroke-width="2"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
<span>74°</span>
</div>
<div class="forecast-item">
<span>Tue</span>
<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#93c5fd" stroke-width="2"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path></svg>
<span>68°</span>
</div>
<div class="forecast-item">
<span>Wed</span>
<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#93c5fd" stroke-width="2"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path></svg>
<span>65°</span>
</div>
</div>
</div>
</div>
Back to Snippets
Advanced Glassmorphism Weather Dashboard CSS
Provide an incredible user experience with this glassmorphism weather dashboard. We layered blurred pastel orbs behind frosted cards, so your design looks perfectly clean and modern.
155