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

443 dlazaro 92 8/9/2025, 1:25:16 PM sky.dlazaro.ca ↗

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

Comments (92)

ryandrake · 7h ago

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...

crazygringo · 1h ago

This is why specifications are important, and why design is important.

The reality is that we have certain conventions that are immediately understandable, and that too much visual complexity results in confusion rather than clarity.

If the sky is hazy white when I expect it to be blue, I'm confused as to whether it's the sky or if the map is still loading. It's adding cognitive complexity for no reason. Stars similarly serve no functional purpose at night.

What you built sounds great for an actual planetary view like Google Earth. And it sounds fun to build. But it's an anti-feature for a navigation view. When you're navigating, simplicity and clarity are paramount. Not realism.

johnfn · 43m ago

Oh come now. You are being no fun.

darknavi · 6h ago

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)

pava0 · 1h ago

Cobalt was a really interesting game, too bad it never got any fame

jbverschoor · 5h ago

Whipping down the innovator with the stupidity whip. Great management

woah · 1h ago

It sounds like the developer spent a lot of time implementing something that nobody wanted. Drawing the sky accurately may be cool, but it wasn't required in this case. It's also not innovation. It's been done before.

This is like if you were renovating your house and the drywall guy spends a huge amount of time building up round corners, but you just wanted regular square corners. Then on some drywall forum they're bitching about how "all clients are stupid" or something.

ryandrake · 4h ago

A foundational, core theme about making commercial software, that repeats over and over and I slowly got accustomed to is: companies really don't want these kinds of micro-innovations. 90% of companies are just looking at their competitors, making a checklist out of those products, and asking engineers to check the boxes and go home. They don't care about little details, about craftsmanship and polish, about lint warnings, about "oh, that's a nice touch," or even quality beyond "will the customer return the product?" They just want people to poop out software as fast as possible so everyone can get bonuses and drive around on their jetskis on Saturday.

If you're the kind of developer who likes to "sand and finish the back side of the cabinet," either you need to find a very rare, special company, or do it at home as a hobby.

jbverschoor · 2h ago

But it's exactly the thing that makes software "delightful". It's also a huge boost to the developer's appreciation, motivation, productivity, care for the product.

But yeah, if you only care about checking the feature boxes.. Go ahead, make shit software with miserable people, but be sure to prepare to go out of business.

philipallstar · 52m ago

The point is a real skybox is not great for satnav software. It's probably actually worse than a stylised mode, with a predictable colour background for anything that's going to sit on top of it.

zarzavat · 6h ago

You should have added a duck.

otikik · 3h ago

I understood that reference

netsharc · 7h ago

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.

benrutter · 2h ago

Ironically, I'm in the South of England wih clear blue sky, and the site thinks I have a much darker and beautiful reddish sunset. Im fairness, it's probably only out by an hour if that.

Waterluvian · 1h ago

I’ve had similar issues at work where people really overdo something and it’s difficult. On one hand you never want to kill that joy and passion someone has. That’s a great characteristic. But projects have scopes and too often instructions like “just draw a blue rectangle” get ignored.

ryandrake · 1h ago

Totally. It was a harsh but needed lesson on the realities of getting work done in a commercial environment.

marcosdumay · 2h ago

Yep, if you have to draw the Sun, you better draw it yellow. If you have to draw a cloudless day sky, you better draw it blue.

That doesn't apply to every single instance of those, but if the sky isn't the focus of your application, a realistic one is just a distraction.

j_bum · 7h ago

Fun (but not fun) story :)

teaearlgraycold · 4h ago

To be honest I don’t think anyone wants that kind of functionality - maybe in the satellite view but not in the vector map.

throwanem · 8h ago

> 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.

mintplant · 4h ago

Of course, the "http-equiv" means that this tag is supposed to stand in for an equivalent HTTP header, so you could accomplish the same by sending a "Refresh: 60" header :)

js2 · 5m ago

There was also server[-side] push:

https://www.oreilly.com/openbook/cgi/ch06_06.html

throwanem · 4h ago

Sure, if you wanted to deal with configuring Apache. Or getting your hosting provider to do that. If you knew to ask, and didn't mind waiting, and your hosting provider knew how...

dudus · 29m ago

Not sure what you are on about. Adding an HTTP header to a request is one of the easiest things to do.

urquhartfe · 9m ago

I think you are the one who doesn't know what they are on about.

First, the header must be added to the response, not the request.

Second, in many environments (managed hosting etc.) there is not an easy way (or indeed a way at all) of adding headers to responses.

skrebbel · 4h ago

I can’t wait till they hear about framesets

dlazaro · 7h ago

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 · 5h ago

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.

phatskat · 4h ago

Honestly it’s kind of cute, I had all but forgotten about http-equiv

cloudfudge · 2h ago

As an old-timer who's not up on all the latest whiz-bang web stuff, I have to ask what is the astro/cloudflare/wrangler magic that allows the following to work:

  const { latitude = "0", longitude = "0" } = Astro.locals.runtime.cf || {};

I gather you're using some cloudflare feature wrapped in astro to provide lat/long but I don't see the actual plumbing that gets it to you (and I did try to spelunk through a decent amount of documentation to find it). Can you elaborate?

dlazaro · 1h ago

There is no visible plumbing because it kinda is magic! Astro provides adapters for different server runtimes (e.g., Vercel, Cloudflare, Netlify), and it's basically just plug and play. The Cloudflare adapter exposes a bunch of bindings [1] through `Astro.locals.runtime`, which can be accessed during each request. The `cf` binding contains incoming request properties [2], including latitude and longitude.

These bindings (or at least some of them) are also mocked when developing locally, in a non-Cloudflare-Workers environment.

[1] https://developers.cloudflare.com/workers/wrangler/api/#supp...

[2] https://developers.cloudflare.com/workers/runtime-apis/reque...

cloudfudge · 1h ago

Great explanation; thanks.

gregsadetsky · 1h ago

You can enable a feature in Cloudflare which will inject the approximate user's lat/lng (based on their IP (and other factors?)) as an HTTP header added to the original request:

https://developers.cloudflare.com/network/ip-geolocation/

"This Managed Transform adds HTTP request headers with location information for the visitor's IP address, such as city, country, continent, longitude, and latitude."

nhinck3 · 7h ago

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

dlazaro · 6h ago

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

nativeit · 3h ago

I was just thinking about how to slice up a star map projection, and apply it as an overlay. I don’t do such things often enough to do it quickly, although I can imagine how it could be achieved. I’d imagine someone working in game dev probably could whip up a mechanism for applying coordinates to a star map fairly quickly, but realizing it in pure CSS would probably require exporting all the slices to a folder as SVG squares that are labeled with coordinates, and then using a bit of JS to stitch it all together in the rendered page.

mpetroff · 2h ago

I wrote a simple web-based night sky viewer a while ago [1], which renders the 750 brightest stars from coordinates in a data file (along with the moon). It uses D3.js to do fully client-side SVG-based rendering for interactive use, but it could be simplified to render server side to an SVG file. I think the main complication is that by adding stars, a projection needs to be decided on, and you'd need to consider the aspect ratio of the browser window.

[1] https://github.com/mpetroff/nightsky

mourner · 4h ago

Author of Suncalc here — this is exactly the kind of stuff I love to see my code being used in, thanks for sharing!

gregsadetsky · 1h ago

Hey, small note that your excellent https://suncalc.net/ is showing an error due to the Google Maps API token having expired.

I know that you deeply know map tech :-) but if I may make a suggestion - you might consider switching from Google Maps to Protomaps? https://github.com/protomaps/protomaps-leaflet

Cheers

mourner · 1h ago

Yeah, I think I last updated that website even before I released the first version of Leaflet. Life is very hectic at the moment, but I do really want to get to it sooner than later and modernize everything.

sheerun · 4h ago

Author or contributor? Great work, by the way, I love such shows

mourner · 1h ago

Wrote it 14 years ago! https://github.com/mourner/suncalc/ It's a bit neglected but I'll do some upkeep shortly...

joeyh · 29m ago

This reminds of of a web page that did this for Ithaca NY circa 1995. The page was a static hardcoded shade of grey.

fmbb · 3h ago

It’s way too dark for this time of year at this time of day here at 60 degrees north.

But it looked very cool earlier today when it matched!

SeanAnderson · 5h ago

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.

101008 · 6h ago

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

esafak · 6h ago

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

xattt · 6h ago

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

fudged71 · 31m ago

It would be awesome for a fake window in a basement

mgdm · 1h ago

I have been meaning to do it for ages! I got as far as finding a paper on the topic and reading it and then forgetting all about it. Nice work.

dehugger · 1h ago

Is this all done server side? I was shocked to inspect the page to discover zero js or even a stylesheet. Not so much as a single div. Very impressive.

card_zero · 4h ago

Useful, saves me looking at the thing.

nisten · 7h ago

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

cgijoe · 5h ago

Ooh, how about this as a live desktop wallpaper!

tinco · 2h ago

21pm in The Netherlands, the sky is a clear blue down to a baby pink right now, however the app shows a black to dark red. Other people are saying it matches exactly for their location so maybe there's some sort of bug?

croisillon · 2h ago

during the day it was good here, now that it is night it's a bit off for me too

j45 · 22m ago

Neat tool, would love to be able to set the location when the registered IP location isn’t accurate.

yonatan8070 · 2h ago

Very cool, though I opened it at night so it's just black. Is there a way to adjust the time it renders to see what it would look like at different times?

verelo · 1h ago

Feels like this would be great for fake skylights…

mushufasa · 5h ago

would love this to be a desktop background -- linux or macOS

nathandaly · 4h ago

I just did some googling and found at least one app to do exactly this on Android. This is now my phone background!!

(I used this, but it does leave a small "please purchase" banner at the top, until you pay: https://play.google.com/store/apps/details?id=com.nuko.livew...)

sudosteph · 1h ago

Looks pretty Carolina blue to me. Good job.

cosmicgadget · 5h ago

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

ianbicking · 7h ago

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 · 7h ago

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.

cwmoore · 2h ago

I like this, but I’m newly concerned about the unitary horizon.

djoldman · 7h ago

@dlazaro, I believe that style={{backgroundColor: bottom}} is not needed in:

    <body style={{backgroundColor: bottom}}> </body>

is not needed.

dlazaro · 6h ago

I actually included that so the tab and status bars are themed on iOS/Safari. Here's someone else's writeup on that: https://medium.com/@evkirkiles/coloring-the-webkit-browser-b...

peterldowns · 6h ago

That's a cool thing to know, thanks for sharing. Great job on the sky site!

doughecka · 2h ago

Wow, this works in chrome on Android as well

djoldman · 2h ago

Today I learned! Thanks

gdubs · 6h ago

Well, that's delightful. Works really well here in the Pacific Northwest :)

No comments yet

stephenlf · 8h ago

Fantastic. I’ve always wondered why the sky wasn’t blue around the horizon. Fascinating stuff.

verandaguy · 7h ago

There's two main reasons for this:

- First and most impactful: as the earth curves down and away from the observer's horizon, your line of sight goes through a thicker slice of the atmosphere.

Looking straight up you might have 100km of atmosphere until space (the distance is made up here, but I'm using the Kármán line as an arbitrary ruler), but looking out towards the horizon (assuming a perfectly spherical Earth), it's much, much more than that 100km, so the light will scatter off of (and/or be filtered by, depending on angle and time of day) more particles in the atmosphere, affecting the colour of the sky.

- The compounding factor here is if there are environmental factors that boost the particle count in the air, and especially particles that'd stay in lower layers of the atmosphere. Where I am, we've been dealing with wildfire smoke of varying strengths for a few weeks. Today's gentle enough, but it's bad enough that my gradient goes from rgb(115, 160, 207) at the top of the sky to rgb(227, 230, 227) at the horizon (which is shockingly accurate).

sheerun · 4h ago

Bit darker blues, please!

mlhpdx · 7h ago

Which direction am I looking? Deeper blue to the north.

dlazaro · 6h ago

It's always facing the sun (although it doesn't include the sun itself).

therealfiona · 3h ago

Works in Hawaii.

cwmoore · 2h ago

Even at sunrise?

michelreij · 5h ago

Beautiful, thank you!

nnnnico · 7h ago

incredible <3 not much else to say

i_love_retros · 7h ago

Curious why a celebration of HTML needed a full stack javascript framework?

dlazaro · 6h ago

A server is needed to calculate the sun's position from latitude + longitude + time, and then render the gradient. I could use HTML templating in some other language/framework, but I used Astro because that's what I'm familiar with and it's very easy to deploy to Cloudflare Pages.

nnnnico · 5h ago

it's beautiful. btw, could this be all done in client side js? didnt look at the implementation, probably server is used to resolve location?

wonger_ · 5h ago

(not author) from the source:

  const { latitude = "0", longitude = "0" } = Astro.locals.runtime.cf || {};

To do it client-side, you would probably have to call some less-reputable IP geolocation service, or settle for navigator.geolocation which has a permission popup

ascorbic · 4h ago

Astro is a great way to write HTML

dlazaro · 4h ago

I'm sure that's your totally unbiased opinion ;)

hoppp · 7h ago

Seems to work :)

DonHopkins · 5h ago

Why doesn't it respect dark mode??? ;)

8n4vidtmkvmk · 4h ago

Wait a few hours

siva7 · 7h ago

how i missed this small hn posts. thanks

jhardy54 · 6h ago

Super neat. Looking forward to checking out your implementation and learning about this!

Foundry (YC F24) is hiring staff-level product engineers (ycombinator.com)

GoGoGrandparent (YC S16) Is Hiring Back End and Full-Stack Engineers

Kyber (YC W23) is hiring enterprise account executives (ycombinator.com)

Converge (YC S23) well-capitalized New York startup seeks product developers (runconverge.com)

Great Question (YC W21) Is Hiring a VP of Engineering (Remote) (ycombinator.com)

Coverage Cat (YC S22) Is Hiring a Senior, Staff, or Principal Engineer (coveragecat.com)

Kaizen (YC X25) is hiring engineers to build browser agents that work (kaizenautomation.com)

Infracost (YC W21) hiring first PM to shift $600B cloud spend to proactive (ycombinator.com)

Sei (YC W22) Is Hiring a Full Stack Engineer in Chennai, India (ycombinator.com)

Artie (YC S23) Is Hiring Founding AEs (ycombinator.com)

Cedana (YC S23) Is Hiring a Systems Engineer (ycombinator.com)

CodeCrafters (YC S22) is hiring first Marketing Person (ycombinator.com)

PAX Markets (YC W25) is hiring a founding principal hardware (RTL) engineer (ycombinator.com)

Sendblue (YC S23) is hiring senior engineers (ycombinator.com)

Thunder Compute (YC S24) Is Hiring a C++ Systems Engineer (ycombinator.com)

Optery (YC W22) Is Hiring in Engineering, Legal, Sales, Marketing (U.S., Latam) (optery.com)

QuestDB (YC S20) Is Hiring a Technical Content Lead (questdb.com)

Depot (YC W23) Is Hiring a Technical Content Writer (Remote) (ycombinator.com)

Firebender (YC W24) Is Hiring (ycombinator.com)

Better Auth (YC X25) Is Hiring (ycombinator.com)

Kapa.ai (YC S23) is hiring a software engineers (EU remote) (ycombinator.com)

Spice Data (YC S19) Is Hiring a Product Associate (New Grad) (ycombinator.com)

Extend (YC W23) is hiring engineers to build SOTA document processing (jobs.ashbyhq.com)

Piramidal (YC W24) is hiring a full stack engineer (ycombinator.com)

Mango Health (YC W24) Is Hiring (ycombinator.com)

Resolve (YC W15) Is Hiring an Operations and Billing Lead for Construction VR

Arva AI (YC S24) Is Hiring an AI Research Engineer (London, UK) (arva.ai)

Rejoy Health (YC W21) Is Hiring (ycombinator.com)

Weave (YC W25) is hiring an AI engineer (ycombinator.com)

CoinTracker (YC W18) is hiring to solve crypto taxes and accounting (remote)

Crimson (YC X25) is hiring founding engineers in London (ycombinator.com)

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

Comments (92)