2024
Total Solar Eclipse
An HTML and CSS animation that simulates a total solar eclipse using a centered container with sun and moon layers, a radial-gradient sun, a solid-color moon, and keyframe motion. Inspired by the April 8, 2024 eclipse that crossed North America over Mexico, the United States, and Canada.
Sandboxes
Highlights
- Radial gradients
- Pure CSS
Context
Animating celestial motion with CSS only; inspired by April 2024 eclipse.