CSS Live Preview Available

Animated Neon Grid

Cyberpunk-style neon grid with scanning laser and pulse effects

CSS3NeonGridCyberpunkLaserAnimation

Code

.neon-grid-container {
  width: 400px;
  height: 400px;
  background: #000;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}
.neon-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(to right, rgba(0, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: grid-pulse 4s infinite ease-in-out;
}
.neon-laser {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, #00ffff, transparent);
  box-shadow: 0 0 20px #00ffff;
  animation: laser-scan 8s linear infinite;
}
.neon-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff00ff;
  box-shadow: 0 0 15px #ff00ff;
  animation: dot-pulse 2s infinite ease-in-out;
}
.neon-dot:nth-child(1) { top: 20%; left: 30%; animation-delay: 0s; }
.neon-dot:nth-child(2) { top: 60%; left: 70%; animation-delay: 0.5s; }
.neon-dot:nth-child(3) { top: 80%; left: 40%; animation-delay: 1s; }
@keyframes grid-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
@keyframes laser-scan {
  0% { left: 0%; }
  50% { left: 100%; }
  100% { left: 0%; }
}
@keyframes dot-pulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.5); opacity: 1; }
}

HTML

<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="neon-grid-container"</span>>
  <"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="neon-grid"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
  <"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="neon-laser"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
  <"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="neon-dot"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
  <"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="neon-dot"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
  <"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="neon-dot"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
</"attr-name"</span>>class</span>="tag"</span>>div</span>>

Live Preview