Aurora Map — Playground

{CF} CodeFronts Back to CSS Grid Layouts Aurora Map Pure CSS

Edit any tab — preview updates live

.gl-aur {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  width: 320px; height: 200px;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(124,108,255,0.18), transparent 70%),
    #0e0e16;
  border: 1px solid rgba(124,108,255,0.25);
  border-radius: 10px;
  padding: 14px;
  position: relative;
}
.gl-aur-n {
  width: 14px; height: 14px;
  align-self: center; justify-self: center;
  border-radius: 50%;
  background: #a78bfa;
  box-shadow:
    0 0 0 3px rgba(167,139,250,0.18),
    0 0 18px rgba(167,139,250,0.6);
  animation: gl-aur-pulse 2.6s ease-in-out infinite;
}
.gl-aur-n:nth-child(2n) { animation-delay: 0.6s; background: #ff6c8a; box-shadow: 0 0 0 3px rgba(255,108,138,0.18), 0 0 18px rgba(255,108,138,0.6); }
.gl-aur-n:nth-child(3n) { animation-delay: 1.2s; background: #3de8f5; box-shadow: 0 0 0 3px rgba(61,232,245,0.18), 0 0 18px rgba(61,232,245,0.6); }
.gl-aur-hub {
  width: 22px; height: 22px;
  background: linear-gradient(135deg, #7c6cff, #a78bfa);
  box-shadow:
    0 0 0 5px rgba(124,108,255,0.22),
    0 0 30px rgba(124,108,255,0.7);
}
@keyframes gl-aur-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.15); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .gl-aur-n { animation: none; }
}

Live preview Ready