<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

#css

#weather

#dashboard

#glassmorphism

#widget

#UI

#blurred background

#advanced layout

/HTML *CSS ()JS Output Live Updates

*, *::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;
  background: #0f172a;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

.weather-app {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  z-index: 1;
}

.orb-yellow {
  width: 200px;
  height: 200px;
  background: #f59e0b;
  top: -50px;
  left: -50px;
  opacity: 0.6;
}

.orb-blue {
  width: 250px;
  height: 250px;
  background: #3b82f6;
  bottom: -50px;
  right: -50px;
  opacity: 0.5;
}

.glass-dashboard {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 30px;
  padding: 40px;
  color: #ffffff;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.location {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 1px;
  margin-bottom: 20px;
  color: #e2e8f0;
}

.temp-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.temp-display h1 {
  font-size: 5rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -2px;
}

.weather-icon {
  animation: floatIcon 4s infinite ease-in-out alternate;
}

@keyframes floatIcon {
  0% { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}

.condition {
  font-size: 1.25rem;
  font-weight: 500;
  color: #bfdbfe;
  margin-bottom: 30px;
}

.divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin-bottom: 30px;
}

.forecast-row {
  display: flex;
  justify-content: space-between;
}

.forecast-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.forecast-item span:first-child {
  color: #94a3b8;
  font-weight: 500;
}

.forecast-item span:last-child {
  font-weight: 600;
  font-size: 1.125rem;
}

<div class="weather-app">
  
  <div class="bg-orb orb-yellow"></div>
  <div class="bg-orb orb-blue"></div>
  
  
  <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 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>

Advanced Glassmorphism Weather Dashboard CSS

Share Code Snippet