This is a submission for Frontend Challenge v24.09.04, CSS Art: Space.
Inspiration
The "Welcome Home" scene is inspired by the feeling of returning to Earth after a long space journey, drawing from the aesthetics of sci-fi movies.
Demo
Journey
To create the starry background, I used three .stars-layer divs with different translateZ and scale values for a parallax effect:
.stars-layer {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
animation: rotate 240s linear infinite;
}
.stars-layer-1 {
transform: translateZ(-300px) scale(2);
}
.stars-layer-2 {
transform: translateZ(-200px) scale(1.75);
}
.stars-layer-3 {
transform: translateZ(-100px) scale(1.5);
}
Pseudo-elements with radial-gradient backgrounds create the twinkling stars, animated using keyframes:
.stars-layer::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: 350px 350px;
animation: twinkle 4s infinite ease-in-out;
}
The Earth glow effect is achieved with a .earth-glow div, a radial gradient background, and a blur filter:
.earth-glow {
position: absolute;
bottom: -20vh;
left: 0;
width: 100%;
height: 40vh;
background: radial-gradient(...);
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
filter: blur(16px);
}
SOCIAL SHARE CARD GENERATOR