Space Background — Preview
Depth without weight
Three parallax star layers, drifting nebula clouds, floating planets and a
detailed satellite — all rendered on a single canvas plus lightweight CSS,
tuned to hold ~60fps on desktop, tablet and mobile.
Swap the content freely
The background lives in its own #space-background layer behind
everything and never blocks clicks or scrolling. Replace this hero with any
Elementor design and the scene stays put.
/* ================================================================
PART 2 — CSS · Premium animated space background
Paste into Appearance ▸ Customize ▸ Additional CSS
(or Elementor ▸ Site Settings ▸ Custom CSS).
Everything is namespaced under #space-background so it will
not touch the rest of your theme.
================================================================ */
:root{
--sb-bg-1:#02030a;
--sb-bg-2:#070a1c;
--sb-bg-3:#05030f;
--sb-neb-purple:#6d3bd8;
--sb-neb-blue:#2f6bff;
--sb-neb-magenta:#c13ad8;
--sb-neb-teal:#25c9d6;
--sb-glow:#59b8ff;
}
/* Dark base so the fixed layer always has something behind it.
Remove or change if your theme already sets a dark page colour. */
html, body{ background-color: var(--sb-bg-1); }
/* ---- The wrapper: full-screen, fixed, behind everything --------- */
#space-background{
position: fixed;
inset: 0;
z-index: -1; /* sits behind normal content */
overflow: hidden;
pointer-events: none; /* never blocks clicks / scroll */
background:
radial-gradient(130% 90% at 50% -12%, #131a44 0%, transparent 58%),
radial-gradient(120% 120% at 82% 18%, rgba(120,60,200,.30) 0%, transparent 55%),
radial-gradient(120% 120% at 14% 78%, rgba(20,120,190,.22) 0%, transparent 55%),
linear-gradient(180deg, var(--sb-bg-1) 0%, var(--sb-bg-2) 46%, var(--sb-bg-3) 100%);
}
/* Make sure children can't be clicked either */
#space-background *{ pointer-events: none; }
/* ---- Star / particle canvas ------------------------------------ */
#space-stars{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
/* ---- Nebula clouds --------------------------------------------- */
.nebula-layer{ position:absolute; inset:0; will-change: transform; }
.nebula{
position: absolute;
border-radius: 50%;
filter: blur(64px);
mix-blend-mode: screen;
opacity: .5;
will-change: transform;
}
.nebula-1{
width: 62vw; height: 62vw; left: -12vw; top: 4vh;
background: radial-gradient(circle at 42% 40%, var(--sb-neb-purple) 0%, transparent 62%);
animation: sb-neb1 52s ease-in-out infinite;
}
.nebula-2{
width: 54vw; height: 54vw; right: -10vw; top: -8vh;
background: radial-gradient(circle at 55% 50%, var(--sb-neb-blue) 0%, transparent 60%);
opacity: .42;
animation: sb-neb2 63s ease-in-out infinite;
}
.nebula-3{
width: 48vw; height: 48vw; left: 8vw; bottom: -14vh;
background: radial-gradient(circle at 50% 50%, var(--sb-neb-magenta) 0%, transparent 60%);
opacity: .34;
animation: sb-neb3 71s ease-in-out infinite;
}
.nebula-4{
width: 40vw; height: 40vw; right: 4vw; bottom: -6vh;
background: radial-gradient(circle at 50% 50%, var(--sb-neb-teal) 0%, transparent 62%);
opacity: .30;
animation: sb-neb1 58s ease-in-out infinite reverse;
}
@keyframes sb-neb1{
0%,100%{ transform: translate3d(0,0,0) scale(1); }
50% { transform: translate3d(4%, -3%, 0) scale(1.08); }
}
@keyframes sb-neb2{
0%,100%{ transform: translate3d(0,0,0) scale(1); }
50% { transform: translate3d(-5%, 3%, 0) scale(1.1); }
}
@keyframes sb-neb3{
0%,100%{ transform: translate3d(0,0,0) scale(1.05); }
50% { transform: translate3d(3%, -4%, 0) scale(1); }
}
/* ---- Planets --------------------------------------------------- */
.planet-layer{ position:absolute; inset:0; will-change: transform; }
.planet{
position: absolute;
border-radius: 50%;
will-change: transform;
}
.planet-1{
width: clamp(52px, 6vw, 110px);
height: clamp(52px, 6vw, 110px);
left: 12%; top: 22%;
background: radial-gradient(circle at 32% 30%, #bcd6ff 0%, #4b7fe0 26%, #1c2d63 66%, #0a1330 100%);
box-shadow: inset -8px -7px 22px rgba(0,0,0,.65), 0 0 34px rgba(80,140,255,.28);
animation: sb-drift 40s ease-in-out infinite;
}
.planet-2{
width: clamp(38px, 4.4vw, 78px);
height: clamp(38px, 4.4vw, 78px);
right: 15%; top: 30%;
background: radial-gradient(circle at 34% 32%, #ffd9a8 0%, #d98a55 30%, #7a3f2c 70%, #2c1a17 100%);
box-shadow: inset -6px -5px 16px rgba(0,0,0,.6), 0 0 26px rgba(230,140,90,.24);
animation: sb-drift 50s ease-in-out infinite reverse;
}
/* ring on planet-2 */
.planet-2::after{
content:"";
position:absolute; left:50%; top:50%;
width: 210%; height: 74%;
transform: translate(-50%,-50%) rotate(-24deg);
border-radius: 50%;
border: 3px solid rgba(255,214,170,.35);
border-bottom-color: rgba(255,214,170,.10);
box-shadow: 0 0 14px rgba(255,190,130,.20);
}
@keyframes sb-drift{
0%,100%{ transform: translate3d(0,0,0); }
50% { transform: translate3d(10px,-14px,0); }
}
/* ---- Satellite (signature element) ----------------------------- */
#space-satellite{
position: absolute;
left: 0; right: 0;
top: 56%; /* just below a typical hero */
transform: translateY(-50%); /* vertical centering (static) */
display: flex;
justify-content: center; /* horizontal centering */
}
.satellite-parallax{
width: clamp(210px, 30vw, 440px);
will-change: transform; /* JS applies gentle scroll/mouse */
}
.satellite-inner{
will-change: transform;
animation: sb-sat-float 17s ease-in-out infinite;
}
.satellite-inner svg{
width: 100%;
height: auto;
display: block;
filter:
drop-shadow(0 0 16px rgba(90,184,255,.35))
drop-shadow(0 0 52px rgba(70,120,255,.18));
}
.sat-light{ animation: sb-blink 3.4s ease-in-out infinite; }
.sat-light--delay{ animation-delay: 1.7s; }
@keyframes sb-sat-float{
0% { transform: translate(0,0) rotate(-1.6deg); }
25% { transform: translate(9px,-14px) rotate(.6deg); }
50% { transform: translate(-7px,-5px) rotate(1.7deg); }
75% { transform: translate(5px,-17px) rotate(0deg); }
100% { transform: translate(0,0) rotate(-1.6deg); }
}
@keyframes sb-blink{
0%,100%{ opacity:1; } 50%{ opacity:.25; }
}
/* ---- Cinematic vignette ---------------------------------------- */
.space-vignette{
position: absolute; inset: 0;
background: radial-gradient(125% 105% at 50% 42%, transparent 55%, rgba(0,0,3,.6) 100%);
}
/* ================= Responsive ==================================== */
@media (max-width: 1024px){
#space-satellite{ top: 58%; }
}
@media (max-width: 640px){
#space-satellite{ top: 60%; }
.satellite-parallax{ width: clamp(180px, 62vw, 320px); }
.nebula{ filter: blur(44px); } /* lighter blur = smoother on mobile */
.planet-1{ top: 18%; left: 8%; }
.planet-2{ top: 26%; right: 8%; }
}
@media (max-width: 380px){
.satellite-parallax{ width: clamp(160px, 66vw, 280px); }
}
/* ================= Accessibility ================================= */
@media (prefers-reduced-motion: reduce){
.nebula, .planet, .satellite-inner, .sat-light{ animation: none !important; }
}
/* ================================================================
PART 3 — JavaScript · Starfield, dust particles & parallax
Paste inside a