15 CSS Background Animations 07 / 15
Glassmorphism Floating Orbs Background
Colorful gradient orbs drift in slow orbits behind a frosted glass card with a reflective sheen sweep.
The code
<div class="bga-07">
<div class="bga-07__scene">
<div class="bga-07__orb bga-07__orb1"></div>
<div class="bga-07__orb bga-07__orb2"></div>
<div class="bga-07__orb bga-07__orb3"></div>
<div class="bga-07__glass"></div>
</div>
</div> <div class="bga-07">
<div class="bga-07__scene">
<div class="bga-07__orb bga-07__orb1"></div>
<div class="bga-07__orb bga-07__orb2"></div>
<div class="bga-07__orb bga-07__orb3"></div>
<div class="bga-07__glass"></div>
</div>
</div>.bga-07, .bga-07 *, .bga-07 *::before, .bga-07 *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.bga-07 {
min-height: 460px;
display: grid;
place-items: stretch;
}
.bga-07__scene {
width: 100%;
min-height: 460px;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
}
/* Colored orbs drifting in slow orbits behind the glass */
.bga-07__orb {
position: absolute;
border-radius: 50%;
filter: blur(8px);
opacity: 0.85;
}
.bga-07__orb1 { width: 320px; height: 320px; top: 10%; left: 8%;
background: radial-gradient(circle at 30% 30%, #ff6ec4, #7873f5);
animation: bga-07-orbit1 18s ease-in-out infinite; }
.bga-07__orb2 { width: 260px; height: 260px; bottom: 12%; right: 10%;
background: radial-gradient(circle at 30% 30%, #43e97b, #38f9d7);
animation: bga-07-orbit2 22s ease-in-out infinite; }
.bga-07__orb3 { width: 200px; height: 200px; top: 45%; left: 55%;
background: radial-gradient(circle at 30% 30%, #fa709a, #fee140);
animation: bga-07-orbit3 16s ease-in-out infinite; }
/* Frosted glass card on top */
.bga-07__glass {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 60%;
max-width: 520px;
height: 320px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 28px;
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
box-shadow: 0 20px 60px rgba(0,0,0,0.35),
inset 0 1px 0 rgba(255,255,255,0.35);
animation: bga-07-float 9s ease-in-out infinite;
}
/* Reflective highlight sweep */
.bga-07__glass::after {
content: "";
position: absolute;
inset: 0;
border-radius: 28px;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
background-size: 250% 100%;
animation: bga-07-sheen 6s linear infinite;
}
@keyframes bga-07-orbit1 { 50% { transform: translate(80px, 60px) scale(1.1); } }
@keyframes bga-07-orbit2 { 50% { transform: translate(-90px, -50px) scale(1.15); } }
@keyframes bga-07-orbit3 { 50% { transform: translate(-60px, 70px) scale(0.9); } }
@keyframes bga-07-float { 0%,100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -58%); } }
@keyframes bga-07-sheen { from { background-position: 200% 0; } to { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) {
.bga-07__orb1,
.bga-07__orb2,
.bga-07__orb3,
.bga-07__glass,
.bga-07__glass::after {
animation: none !important;
}
} .bga-07, .bga-07 *, .bga-07 *::before, .bga-07 *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.bga-07 {
min-height: 460px;
display: grid;
place-items: stretch;
}
.bga-07__scene {
width: 100%;
min-height: 460px;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
}
/* Colored orbs drifting in slow orbits behind the glass */
.bga-07__orb {
position: absolute;
border-radius: 50%;
filter: blur(8px);
opacity: 0.85;
}
.bga-07__orb1 { width: 320px; height: 320px; top: 10%; left: 8%;
background: radial-gradient(circle at 30% 30%, #ff6ec4, #7873f5);
animation: bga-07-orbit1 18s ease-in-out infinite; }
.bga-07__orb2 { width: 260px; height: 260px; bottom: 12%; right: 10%;
background: radial-gradient(circle at 30% 30%, #43e97b, #38f9d7);
animation: bga-07-orbit2 22s ease-in-out infinite; }
.bga-07__orb3 { width: 200px; height: 200px; top: 45%; left: 55%;
background: radial-gradient(circle at 30% 30%, #fa709a, #fee140);
animation: bga-07-orbit3 16s ease-in-out infinite; }
/* Frosted glass card on top */
.bga-07__glass {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 60%;
max-width: 520px;
height: 320px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 28px;
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
box-shadow: 0 20px 60px rgba(0,0,0,0.35),
inset 0 1px 0 rgba(255,255,255,0.35);
animation: bga-07-float 9s ease-in-out infinite;
}
/* Reflective highlight sweep */
.bga-07__glass::after {
content: "";
position: absolute;
inset: 0;
border-radius: 28px;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
background-size: 250% 100%;
animation: bga-07-sheen 6s linear infinite;
}
@keyframes bga-07-orbit1 { 50% { transform: translate(80px, 60px) scale(1.1); } }
@keyframes bga-07-orbit2 { 50% { transform: translate(-90px, -50px) scale(1.15); } }
@keyframes bga-07-orbit3 { 50% { transform: translate(-60px, 70px) scale(0.9); } }
@keyframes bga-07-float { 0%,100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -58%); } }
@keyframes bga-07-sheen { from { background-position: 200% 0; } to { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) {
.bga-07__orb1,
.bga-07__orb2,
.bga-07__orb3,
.bga-07__glass,
.bga-07__glass::after {
animation: none !important;
}
}More from 15 CSS Background Animations
Animated Gradient Backgrounds (Infinite Shifting)Floating Particle or Bubble EffectsStarry Night / Parallax Space BackgroundInteractive or Click-to-Expand Ripple/Static EffectsMoving Geometric & Angled PatternsVideo-Mimicking / Subtle Wave OverlaysAurora Borealis Background AnimationMatrix Digital Rain BackgroundAnimated Mesh Gradient Blob BackgroundFalling Snow Background AnimationAnimated Blob Morphing BackgroundRetro Cyberpunk Grid / Synthwave Horizon
View the full collection →