CSS Weather Display

The countdown at the top of the page shows the time to the next sunset (or sunrise, if it’s night-time). Why are we telling you the date and time of the next sunset or sunrise? Simple: our website design isn’t static, it changes depending on the time of day, or night, and the state of the weather where you are right now.

Time of day

While our backdrop may show images of the Liverpool skyline (near our office) the time of day and weather is specific to you. Our website takes the information based on your IP Address and extrapolates where in the world you’re based and calculates the sunrise and sunset time for your area. Our CSS then adjusts to that time, so you can see our website in the day, the night, at sundown or sunup – watching the sunset on Engage Web is a beautiful sight we assure you.

Lot of weather we’ve been having

But wait, there’s more. Not content with displaying the time of day or night in CSS form, our website also uses your IP Address to extrapolate the weather information for your area, and represents that too. So, if it’s raining where you are, it’s raining on our website. If you’re enjoying brilliant sunshine, so is our website. If you’re in the midst of a snow blizzard, so are we!

In total there are 47 different weather variations on our website, including several different types of rain – which will be handy for our UK visitors.

Beware the moon!

But wait, there’s even more. In addition to the time of day, or night, and your local weather, our website also represents the lunar cycle, showing the correct moon for the time of month.

So, if you need to know the weather you no longer need to check the weather report, look at the weather on your phone or rely on your eyes by looking out of the window; you can just look at engageweb.co.uk (although looking out of the window may be more accurate as our weather is still reliant on Yahoo having accurate data).


Here are some of the 47 different weather variations you may see on our skyline. Check our site when the weather changes in your area, and to watch our spectacular sunsets and sunrises.

Clear Day

Heavy Rain

Heavy Snow


Mild Rain at Night

Our weather feature has been covered on the web design sites CSS Tricks and Web Designer Depot.

The serious application

While our weather system may be a bit of fun, a rather extravagant way to show what we can do, and great as a bit of link attraction, there is a more serious application to what we have built. The basis of the system picks out the exact location of a visitor to this website – and we are able to use that information to serve up anything we want based on that data.

Would serving different content, products or services to people based on their geographical location be of use to your business? Give us a call on 0345 621 4321 to see how our weather system can help you.


  • When this idea was originally conceived of back in 2006, the only technology able to handle it was Flash. Thankfully our designer Steven didn’t need Flash now, in 2012, and was able to do everything asked of him, and more, with CSS.

    I particularly love the moon phases. The full moon looks beautiful against heavy rain.

  • […] own website features a dynamic weather system that checks the weather forecast from Yahoo in your area (yes, you) and displays that weather using […]

  • >

    0345 621 4321

    Call Now Button

    Who Engage Web has helped:

    Ice Lolly Minuteman Press BUNZLGS1 UK The Underfloor Heating Store West Cheshire Athletic Club Thomas Cook MWB Business ExchangeWeb Media 360 D2 Architects Beacon Financial Training Steely ProductsBurlydam Garden Centre Asentiv BodyHQ Clever Vine Endeavour Mortgages Pro Networks Comm-Tech Wickers World Ascot Mortgages Top Teks
    TEL: 0345 621 4321