15 CSS Background Animations 15 / 15

Animated Comic Book Dot / Halftone Wave

Two offset radial-gradient dot layers breathe and drift in a pop-art duotone, with a radial mask pulsing a spotlight wave through the pattern.

Pure CSS MIT licensed

Live Demo Open in tab

Open in playground

The code

<div class="bga-15">
  <div class="bga-15__scene">
    <div class="bga-15__dots"></div>
    <div class="bga-15__dots2"></div>
    <div class="bga-15__wavemask"></div>
  </div>
</div>

<div class="bga-15">
  <div class="bga-15__scene">
    <div class="bga-15__dots"></div>
    <div class="bga-15__dots2"></div>
    <div class="bga-15__wavemask"></div>
  </div>
</div>

.bga-15, .bga-15 *, .bga-15 *::before, .bga-15 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bga-15 {
  min-height: 460px;
  display: grid;
  place-items: stretch;
}

.bga-15__scene {
  width: 100%;
  min-height: 460px;
  position: relative;
  overflow: hidden;
  background: #ffd23f;
}

/* Base halftone dot layer that breathes via background-size scaling */
.bga-15__dots {
  position: absolute;
  inset: -10%;
  background-image: radial-gradient(circle, #1a1a2e 30%, transparent 31%);
  background-size: 32px 32px;
  animation: bga-15-breathe 5s ease-in-out infinite, bga-15-drift 14s linear infinite;
}

/* Second offset color layer for a pop-art duotone wave */
.bga-15__dots2 {
  position: absolute;
  inset: -10%;
  background-image: radial-gradient(circle, #ff2e63 26%, transparent 27%);
  background-size: 32px 32px;
  background-position: 16px 16px;
  mix-blend-mode: multiply;
  opacity: 0.85;
  animation: bga-15-breathe2 6.5s ease-in-out infinite, bga-15-drift2 18s linear infinite;
}

/* Radial mask creates a "wave"/spotlight that the dots pulse within */
.bga-15__wavemask {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(255,210,63,0.0) 40%, #ffd23f 80%);
  animation: bga-15-pulseMask 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes bga-15-breathe {
  0%,100% { background-size: 28px 28px; }
  50%     { background-size: 40px 40px; }
}
@keyframes bga-15-breathe2 {
  0%,100% { background-size: 40px 40px; }
  50%     { background-size: 28px 28px; }
}
@keyframes bga-15-drift  { to { background-position: 64px 64px; } }
@keyframes bga-15-drift2 { to { background-position: -48px 80px; } }
@keyframes bga-15-pulseMask {
  0%,100% { transform: scale(1); opacity: 0.9; }
  50%     { transform: scale(1.15); opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .bga-15__dots,
  .bga-15__dots2,
  .bga-15__wavemask {
    animation: none !important;
  }
}

.bga-15, .bga-15 *, .bga-15 *::before, .bga-15 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bga-15 {
  min-height: 460px;
  display: grid;
  place-items: stretch;
}

.bga-15__scene {
  width: 100%;
  min-height: 460px;
  position: relative;
  overflow: hidden;
  background: #ffd23f;
}

/* Base halftone dot layer that breathes via background-size scaling */
.bga-15__dots {
  position: absolute;
  inset: -10%;
  background-image: radial-gradient(circle, #1a1a2e 30%, transparent 31%);
  background-size: 32px 32px;
  animation: bga-15-breathe 5s ease-in-out infinite, bga-15-drift 14s linear infinite;
}

/* Second offset color layer for a pop-art duotone wave */
.bga-15__dots2 {
  position: absolute;
  inset: -10%;
  background-image: radial-gradient(circle, #ff2e63 26%, transparent 27%);
  background-size: 32px 32px;
  background-position: 16px 16px;
  mix-blend-mode: multiply;
  opacity: 0.85;
  animation: bga-15-breathe2 6.5s ease-in-out infinite, bga-15-drift2 18s linear infinite;
}

/* Radial mask creates a "wave"/spotlight that the dots pulse within */
.bga-15__wavemask {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(255,210,63,0.0) 40%, #ffd23f 80%);
  animation: bga-15-pulseMask 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes bga-15-breathe {
  0%,100% { background-size: 28px 28px; }
  50%     { background-size: 40px 40px; }
}
@keyframes bga-15-breathe2 {
  0%,100% { background-size: 40px 40px; }
  50%     { background-size: 28px 28px; }
}
@keyframes bga-15-drift  { to { background-position: 64px 64px; } }
@keyframes bga-15-drift2 { to { background-position: -48px 80px; } }
@keyframes bga-15-pulseMask {
  0%,100% { transform: scale(1); opacity: 0.9; }
  50%     { transform: scale(1.15); opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .bga-15__dots,
  .bga-15__dots2,
  .bga-15__wavemask {
    animation: none !important;
  }
}

More from 15 CSS Background Animations

Animated Gradient Backgrounds (Infinite Shifting)Floating Particle or Bubble Effects Starry Night / Parallax Space Background Interactive or Click-to-Expand Ripple/Static Effects Moving Geometric & Angled Patterns Video-Mimicking / Subtle Wave Overlays Glassmorphism Floating Orbs Background Aurora Borealis Background Animation Matrix Digital Rain Background Animated Mesh Gradient Blob Background Falling Snow Background Animation Animated Blob Morphing Background

View the full collection →