77 lines
1.5 KiB
CSS
77 lines
1.5 KiB
CSS
.background-canvas {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -1;
|
|
overflow: hidden;
|
|
background: linear-gradient(180deg, #f4fff6 0%, #e7f8eb 45%, #def1e4 100%);
|
|
}
|
|
|
|
.glow {
|
|
position: absolute;
|
|
width: 420px;
|
|
height: 420px;
|
|
border-radius: 55% 45% 60% 40% / 48% 52% 45% 55%;
|
|
opacity: 0.25;
|
|
filter: blur(0px);
|
|
background: radial-gradient(circle at 35% 35%, rgba(140, 214, 167, 0.65), rgba(140, 214, 167, 0));
|
|
animation: floaty 32s ease-in-out infinite;
|
|
}
|
|
|
|
.glow-1 {
|
|
top: -140px;
|
|
left: -160px;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.glow-2 {
|
|
top: 55%;
|
|
left: 60%;
|
|
animation-delay: 8s;
|
|
background: radial-gradient(circle at 60% 60%, rgba(120, 192, 152, 0.55), rgba(120, 192, 152, 0));
|
|
}
|
|
|
|
.glow-3 {
|
|
bottom: -160px;
|
|
right: -120px;
|
|
animation-delay: 16s;
|
|
background: radial-gradient(circle at 40% 40%, rgba(176, 229, 197, 0.6), rgba(176, 229, 197, 0));
|
|
}
|
|
|
|
@keyframes floaty {
|
|
0% {
|
|
transform: translate3d(0, 0, 0) scale(1);
|
|
}
|
|
30% {
|
|
transform: translate3d(35px, -25px, 0) scale(1.05);
|
|
}
|
|
60% {
|
|
transform: translate3d(-30px, 30px, 0) scale(0.95);
|
|
}
|
|
100% {
|
|
transform: translate3d(0, 0, 0) scale(1);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.glow {
|
|
width: 260px;
|
|
height: 260px;
|
|
opacity: 0.22;
|
|
}
|
|
|
|
.glow-1 {
|
|
top: -110px;
|
|
left: -140px;
|
|
}
|
|
|
|
.glow-2 {
|
|
top: 48%;
|
|
left: 38%;
|
|
}
|
|
|
|
.glow-3 {
|
|
bottom: -140px;
|
|
right: -120px;
|
|
}
|
|
}
|