5 אפקטים לרקעים וסקשנים - חיים, ומהירים (בלי תוסף)

.panel { background: linear-gradient(120deg,
    #3BD9FF, #8B5CF6, #0A0B17, #3BD9FF); background-size: 300% 300%;
  animation: grad var(--dur,10s) ease infinite; }
@keyframes grad { 0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%} }

.panel::before, .panel::after { content:''; position:absolute;
  width:55%; aspect-ratio:1; border-radius:50%; filter: blur(45px); }
.panel::before { background:#3BD9FF; animation: b1 var(--dur,16s) infinite; }
.panel::after  { background:#8B5CF6; animation: b2 var(--dur,16s) infinite; }

.panel::after { content:''; position:absolute; inset:0;
  background-image: url("data:image/svg+xml,...feTurbulence...");
  opacity:.35; animation: grain var(--dur,.5s) steps(3) infinite; }

.panel { background-image: radial-gradient(
    rgba(59,217,255,.45) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  animation: dots var(--dur,8s) linear infinite; }
@keyframes dots { to { background-position: 22px 22px; } }

.panel::before { content:''; position:absolute; inset:-50%;
  background: conic-gradient(from 0deg, transparent, #3BD9FF,
    transparent, #8B5CF6, transparent); filter: blur(60px); opacity:.55;
  animation: aur var(--dur,12s) linear infinite; }
@keyframes aur { to { transform: rotate(360deg); } }