About this snippet

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.

Size
4.4 KB
Uses
HTML, CSS
Loads
Nothing external
Views
272

Collections

Related snippets

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

      

          


    

    
  

  















  
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