Dusk · civil twilight · the sun on its arc
CSS Gradient Generator
The sky is the gradient. Drag the sun along its arc to set the angle, add colour stops for the bands of the sky, or start from a real twilight. The CSS is written out below.
Sky
CSS
Gradients, timed by the sun
A CSS gradient is a list of colour stops along a line, a circle or a sweep. The line's direction is the angle: 180deg runs top to bottom, 90deg left to right. On this page the sun sets the direction, because that is how a sky works: the brightest band is nearest the sun and the darkest opposite it. For a radial gradient the sun's position becomes the centre, and for a conic gradient it sets where the sweep starts.
The twilight presets
Near the horizon at civil dusk the sky runs red, orange, yellow, then purple and blue upward. Opposite the sun a pink band, the Belt of Venus, sits above the blue-grey shadow of the Earth. At nautical twilight the colour has left and only blue remains; by astronomical twilight it is near black. The presets carry those orderings; drag the sun to see them at other angles.
How do I put a gradient on an element?
Copy the CSS and set it as the background. For text, add -webkit-background-clip: text and a transparent text colour.
What are the percentages?
Where each colour band sits along the line, from 0 at the start to 100 at the end. Two bands at the same position make a hard edge.
Is anything uploaded?
No. The sky is drawn in your browser.