dnlzro/horizon

The current sky at your approximate location, rendered as a CSS gradient

TypeScript

653

5 commits

updated Aug 12, 2025

sky.dlazaro.ca

See the code

README

Horizon

The current sky at your approximate location, rendered as a CSS gradient. Refreshes every minute.

Created for HTML Day 2025 as a showcase of CSS gradients and the little-known meta http-equiv="Refresh" HTML tag (MDN).

The page is rendered on-demand by a server. No JavaScript is sent to the client.

Featured at #1 on Hacker News.

Attribution

Physical model and parameter choices originally appeared in "A Scalable and Production Ready Sky and Atmosphere Rendering Technique" (Sébastien Hillaire).
Implementation derived from "Production Sky Rendering" (Andrew Helmer, MIT License).

astro

css

graphics

html-day

Significant stargazers

Nico Weber

308 followers · starred Aug 2025

Alexandre Dulaunoy

1,493 followers · starred Aug 2025

Eric Zhang

3,249 followers · starred Aug 2025

Kevin Kwok

1,828 followers · starred Aug 2025

Similar repos

Noniv/web-ocean

Real-time WebGPU ocean renderer written from scratch, no engine. FFT waves, whitecaps, sun glitter,…

724

pbakaus/radiant

A curated collection of generative shader art

1,004

ebruneton/precomputed_atmospheric_scattering

This project provides a new implementation of our EGSR 2008 paper "Precomputed Atmospheric…

1,071

jackyzha0/sunlit

a pure css implementation of some sunlight streaming in through the window

1,040

WICG/canvas-color-space

Proposed web platform feature to add color management, wide gamut and high bit-depth support to the…

eshin087/gcdatlas

The real universe, drawn entirely in ASCII. An explorable WebGL atlas from Earth to the edge of the…

wwwtyro/glsl-atmosphere

Renders sky colors with Rayleigh and Mie scattering.

635

chenglou/pure-css-shaders-art

At the intersection of art and bad performance

169