---
title: "Render a Weather Widget"
description: "Render a weather widget as an image using the HTML API. Multi-language code and rendering pitfalls."
url: "https://html2img.com/docs/examples/weather-widget/"
---
# How to Render a Weather Widget as an Image
Render a weather widget as a PNG. Useful for digital signage, daily-briefing emails and weather-app share cards.
> **Note**
>
> For other structured-data card images, the [Product card template](https://html2img.com/templates/product-card/) is the closest pre-built fit. Send the title, image and key facts as JSON and get a tested PNG back.
## HTML Content
```html
```
## CSS Styles
```css
body {
margin: 0;
padding: 24px;
background: white;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.weather-widget {
width: 300px;
background: linear-gradient(135deg, #4c6ef5, #228be6);
color: white;
border-radius: 16px;
padding: 24px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}
.current-weather {
display: flex;
align-items: center;
margin-bottom: 24px;
}
.weather-icon {
margin-right: 16px;
}
.temperature {
font-size: 48px;
font-weight: 700;
line-height: 1;
margin-bottom: 4px;
}
.description {
font-size: 16px;
opacity: 0.9;
}
.weather-details {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
padding: 16px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 16px;
}
.detail {
text-align: center;
}
.label {
font-size: 12px;
opacity: 0.8;
margin-bottom: 4px;
}
.value {
font-size: 16px;
font-weight: 600;
}
.location {
display: flex;
align-items: center;
font-size: 14px;
opacity: 0.9;
margin-bottom: 24px;
}
.location svg {
margin-right: 6px;
}
.forecast {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.forecast-item {
text-align: center;
font-size: 14px;
}
.day {
opacity: 0.8;
margin-bottom: 4px;
}
.icon {
font-size: 20px;
margin: 4px 0;
}
.temp {
font-weight: 600;
}
```
## API Request
```bash
POST https://app.html2img.com/api/html
```
```json
{
"html": "",
"width": 348,
"height": 355,
"css": "body{margin:0;padding:24px;background:white;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif}.weather-widget{width:300px;background:linear-gradient(135deg,#4c6ef5,#228be6);color:white;border-radius:16px;padding:24px;box-shadow:0 4px 24px rgba(0,0,0,0.1)}.current-weather{display:flex;align-items:center;margin-bottom:24px}.weather-icon{margin-right:16px}.temperature{font-size:48px;font-weight:700;line-height:1;margin-bottom:4px}.description{font-size:16px;opacity:0.9}.weather-details{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:16px 0;border-top:1px solid rgba(255,255,255,0.1);border-bottom:1px solid rgba(255,255,255,0.1);margin-bottom:16px}.detail{text-align:center}.label{font-size:12px;opacity:0.8;margin-bottom:4px}.value{font-size:16px;font-weight:600}.location{display:flex;align-items:center;font-size:14px;opacity:0.9;margin-bottom:24px}.location svg{margin-right:6px}.forecast{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.forecast-item{text-align:center;font-size:14px}.day{opacity:0.8;margin-bottom:4px}.icon{font-size:20px;margin:4px 0}.temp{font-weight:600}"
}
```
> **Note**
>
> Update the weather data, location, and forecast information to match your needs.
## How it Works
1. Modern gradient background with weather information
2. SVG icons for weather conditions
3. Grid layout for weather details and forecast
4. Responsive design that works well on any device
> **Warning**
>
> The widget uses emoji for forecast icons which may render differently across platforms. Use SVG icons for consistent results.
## Code in other languages
### Node.js
```javascript
const response = await fetch('https://app.html2img.com/api/html', {
method: 'POST',
headers: { 'X-API-Key': process.env.HTML2IMG_API_KEY, 'Content-Type': 'application/json' },
body: JSON.stringify({ html: weatherHtml, css: weatherCss, width: 348, height: 355 }),
});
const { url } = await response.json();
```
### Python
```python
import os, requests
response = requests.post(
'https://app.html2img.com/api/html',
headers={'X-API-Key': os.environ['HTML2IMG_API_KEY']},
json={'html': weather_html, 'css': weather_css, 'width': 348, 'height': 355},
)
url = response.json()['url']
```
### PHP
```php
$ch = curl_init('https://app.html2img.com/api/html');
curl_setopt_array($ch, [
CURLOPT_RETURNTRANSFER => true, CURLOPT_POST => true,
CURLOPT_HTTPHEADER => ['X-API-Key: ' . getenv('HTML2IMG_API_KEY'), 'Content-Type: application/json'],
CURLOPT_POSTFIELDS => json_encode(['html' => $weatherHtml, 'css' => $weatherCss, 'width' => 348, 'height' => 355]),
]);
$url = json_decode(curl_exec($ch), true)['url'];
```
## Common pitfalls
- **Emoji icons render inconsistently.** Replace emoji with self-hosted SVGs so the widget looks the same in every render.
- **Temperature unit drift.** Always include the unit in the rendered string ("22°C" or "72°F") so the image is unambiguous.
- **Long city names overflow.** Use `text-overflow: ellipsis` on the location label or pre-truncate in your data layer.
## See also
- [JavaScript integration guide](https://html2img.com/integrations/javascript/), [Python integration guide](https://html2img.com/integrations/python/)
- [html parameter](https://html2img.com/docs/parameters/html/), [dimensions parameter](https://html2img.com/docs/parameters/dimensions/)