How to Display Local Weather with an Adaptive Background in Webflow

Learn how to display a visitor’s local weather with a background that adapts to the weather conditions in Webflow.

In this tutorial, Sandro, cofounder of the Gemeos Webflow agency, shows you how to display the visitor’s local weather with a background that adapts to the weather conditions in Webflow.

Example

Allow geolocation to see your weather — or simulate a condition

Condition	Icon	Background gradient
Sunny	☀️	Gold to orange
Cloudy	⛅	Blue-gray
Rainy	🌧️	Deep blue
Snowy	❄️	Pale light blue
Stormy	⛈️	Dark charcoal
Foggy	🌫️	Light gray

1. Create the container in Webflow

Create a Div with the ID weather-widget. The script injects the content and style automatically — gradient background, icon, temperature, and all. You can place the Div anywhere on your page.

2. Add the script in Footer code

(function() {
  var el = document.getElementById('weather-widget');
  if (!el) return;

  var weatherConfig = {
    sunny:  { icon: '☀️', label: 'Sunny',    bg: 'linear-gradient(135deg,#ffd700,#ff8c00)', color: '#111' },
    cloudy: { icon: '⛅', label: 'Cloudy',        bg: 'linear-gradient(135deg,#b0bec5,#78909c)', color: '#fff' },
    rainy:  { icon: '🌧️', label: 'Rainy',       bg: 'linear-gradient(135deg,#4169e1,#1e3a8a)', color: '#fff' },
    snowy:  { icon: '❄️', label: 'Snowy',         bg: 'linear-gradient(135deg,#e3f2fd,#90caf9)', color: '#111' },
    stormy: { icon: '⛈️', label: 'Stormy',        bg: 'linear-gradient(135deg,#37474f,#1a1a2e)', color: '#fff' },
    foggy:  { icon: '🌫️', label: 'Foggy',        bg: 'linear-gradient(135deg,#cfd8dc,#90a4ae)', color: '#111' },
  };

  function getCondition(code) {
    if (code === 0) return 'sunny';
    if (code <= 3) return 'cloudy';
    if (code <= 48) return 'foggy';
    if (code <= 67) return 'rainy';
    if (code <= 77) return 'snowy';
    return 'stormy';
  }

  function render(condition, temp, city) {
    var cfg = weatherConfig[condition] || weatherConfig.sunny;
    el.style.cssText = 'background:' + cfg.bg + ';border-radius:16px;padding:1.5rem;' +
      'display:flex;align-items:center;gap:1rem;transition:all 0.5s;';
    el.innerHTML = '' + cfg.icon + '' +
      '' +
      temp + '°C — ' + cfg.label + '
' +
      '' + (city || 'Your location') + '
';
  }

  render('cloudy', '...', 'Location in progress...');

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(pos) {
      var lat = pos.coords.latitude, lon = pos.coords.longitude;
      fetch('https://api.open-meteo.com/v1/forecast?latitude=' + lat + '&longitude=' + lon + '¤t_weather=true&timezone=auto')
        .then(function(r) { return r.json(); })
        .then(function(d) {
          var w = d.current_weather;
          render(getCondition(w.weathercode), Math.round(w.temperature), 'Your location');
        });
    }, function() {
      render('sunny', '22', 'Dubai (demo)');
    });
  } else {
    render('sunny', '22', 'Dubai (demo)');
  }
})();

good to know

The Open-Meteo API is free and doesn’t require an API key for reasonable use. Geolocation triggers a browser permission prompt, so plan a default state if the user declines it (the script shows Dubai at 22°C as a fallback). On slow connections, the gray “Cloudy” background appears while the content loads.

Conclusion

A weather widget with an adaptive background creates a contextual experience. Use cases:

Homepage sections for lifestyle or travel websites
SaaS apps with contextual personalization
Local websites that want to show their territorial roots

Allow geolocation to see your weather

How to Display Local Weather with an Adaptive Background in Webflow

Example

1. Create the container in Webflow

2. Add the script in Footer code

Conclusion

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

Similar tutorials