Skip to content(if available)orjump to list(if available)

Show HN: The current sky at your approximate location, as a CSS gradient

Show HN: The current sky at your approximate location, as a CSS gradient

43 comments

·August 9, 2025

For HTML Day 2025 [1], I made a web service that displays the current sky at your approximate location as a CSS gradient. Colours are simulated on-demand using atmospheric absorption and scattering coefficients. Updates every minute, without the use of client-side JavaScript.

Source code and additional information is available on GitHub: https://github.com/dnlzro/horizon

[1] https://html.energy/html-day/2025/index.html

ryandrake

Awesome. I remember much earlier in my career I was working on a 3D turn-by-turn navigation software, and one of my tasks was to draw the sky in the background. The more senior guy on the team said, just draw a blue rectangle during the day and a dark gray one at night and call it job done. Of course, I had to do it the hard way, so I looked up the relevant literature on sky rendering based on the environment, latitude, longitude, time of day and so on, which at the time was Preetham[1] ("A Practical Analytic Model for Daylight"), and built a fully realistic sky model for the software. I even added prominent stars based on a hard-coded ephemeris table. It was quite fast, too.

Well, the higher ups of course hated it, they were confused as to why the horizon would get hazy, yellowish, and so on. "Our competitors' skies are blue!" They didn't like "Use your eyes and look outside" as an answer.

Eventually, I was told to scrap it and just draw a blue rectangle :(

All that to say, nice job on the site!

1: https://courses.cs.duke.edu/cps124/fall01/resources/p91-pree...

darknavi

A past coworker who worked on Cobalt[1] told me that they spent entirely too much time implementing stars in the sky of the game with some amount of real(ish) star system physics behind them.

I can understand people removing polish things like that if there are usability concerns, but those small things add up to a lot in an end product and are a joy to find and explore.

1: https://en.wikipedia.org/wiki/Cobalt_(video_game)

jbverschoor

Whipping down the innovator with the stupidity whip. Great management

netsharc

Not even as an easter egg?

You could've sold it with telling them Vincent Van Gogh's paintings had the location of stars accurately, you were inspired by those paintings to reproduce the sky color accurately.

zarzavat

You should have added a duck.

null

[deleted]

j_bum

Fun (but not fun) story :)

throwanem

> the little-known meta http-equiv="Refresh" HTML tag

Oh, don't mind me, I'll just be over here in the corner laughing ruefully as my bones crumble to dust: back when I started, if you wanted a page to refresh on its own, this was the only way.

Beautiful work! A splendid example of formal minimalism at its best.

skrebbel

I can’t wait till they hear about framesets

dlazaro

Thank you! And umm, not to make you feel ancient, but I think I wasn't even alive yet when `setTimeout(() => location.reload(), ...)` first became widely available.

throwanem

Oh, don't worry about it at all, and I don't just mean in my own case. Every generation learns to age graciously or otherwise, partly through experience, and for me it's a regular source of joy to see you young 'uns independently rediscover things I long since quit bothering to remember.

SeanAnderson

Oh nice, this is actually something I very specifically wanted for https://ant.care/! I was trying to have the background sky for the ant farm be reflective of the user's current environment, but I didn't do anything more than a naïve approach. Maybe I'll work on adopting your approach at some point :) Still a bit torn on if the whole thing should be Rust/WASM or just the core simulation in Rust and defer as much as possible to JS/HTML.

nhinck3

Opened this up and sat there for a good 20 seconds waiting for something to happen... only to remember it's midnight here.

dlazaro

Maybe someone smarter than me could add stars to the night sky, so it's not just black.

esafak

More sophisticated than I expected. It relies on a research paper: https://github.com/ebruneton/precomputed_atmospheric_scatter...

101008

Put my phone against the window and I had to call over my wife to come to check it: it matches 100% (clear sky right now). It's amazing, congratulations

michelreij

Beautiful, thank you!

cgijoe

Ooh, how about this as a live desktop wallpaper!

xattt

This would be an awesome background for a smart home dash!

nisten

i put my laptop next to the window and it was spot on wtf

what got me the most is opening chrome dev tools and seeing nothing there

cosmicgadget

That is awesome but now I want to check what my SF bros see when they look up.

ianbicking

I'm around so much wildfire smoke lately that my sky expectations have changed...

I wonder what it would take to account for weather?

craftkiller

That'd be a pretty large introduction of a dependency. The sky can be calculated with just lat/lon and the current date+time. Adding in weather would mean querying some external weather service.