<div class="weather-card">
  <div class="weather-header">
    <h3>San Francisco</h3>
    <span>Mon, 12:30 PM</span>
  </div>
  <div class="weather-body">
    <svg class="w-icon" viewBox="0 0 24 24" width="64" height="64" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"></path></svg>
    <div class="temp">72&deg;</div>
    <div class="condition">Sunny</div>
  </div>
  <div class="weather-details">
    <div class="detail">
      <span>Wind</span>
      <strong>8 mph</strong>
    </div>
    <div class="detail">
      <span>Humidity</span>
      <strong>34%</strong>
    </div>
    <div class="detail">
      <span>Feels Like</span>
      <strong>74&deg;</strong>
    </div>
  </div>
</div>

.weather-card {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: white;
  padding: 30px;
  border-radius: 24px;
  width: 300px;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}
.weather-header h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}
.weather-header span {
  font-size: 0.9rem;
  opacity: 0.8;
}
.weather-body {
  text-align: center;
  margin: 30px 0;
}
.temp {
  font-size: 4rem;
  font-weight: 800;
  line-height: 1;
  margin: 10px 0;
}
.condition {
  font-size: 1.2rem;
  font-weight: 500;
}
.weather-details {
  display: flex;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.2);
  padding: 15px;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}
.detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.8rem;
}
.detail span {
  opacity: 0.8;
  margin-bottom: 4px;
}
.detail strong {
  font-size: 1rem;
}

Back to Snippets

Weather Card Widget CSS

Display the forecast with this beautiful weather widget. It features a large temperature display, icon, and additional details like humidity and wind speed, all styled with a modern gradient background.

444

#css

#weather

#widget

#card

#gradient

#glassmorphism

#ui

Run /HTML *CSS ()JS Output Console0 Live Updates Focus

.weather-card {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: white;
  padding: 30px;
  border-radius: 24px;
  width: 300px;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}
.weather-header h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}
.weather-header span {
  font-size: 0.9rem;
  opacity: 0.8;
}
.weather-body {
  text-align: center;
  margin: 30px 0;
}
.temp {
  font-size: 4rem;
  font-weight: 800;
  line-height: 1;
  margin: 10px 0;
}
.condition {
  font-size: 1.2rem;
  font-weight: 500;
}
.weather-details {
  display: flex;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.2);
  padding: 15px;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}
.detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.8rem;
}
.detail span {
  opacity: 0.8;
  margin-bottom: 4px;
}
.detail strong {
  font-size: 1rem;
}