DEV Community

ANDYSAY
ANDYSAY

Posted on

✨ Building a Flickering Neon Sphere with Pure CSS — No JavaScript Required

#css

🌌 Introduction
Have you ever wanted to create a futuristic, glowing energy sphere — something that looks alive, pulses gently, and flickers like real plasma?

In this tutorial, you'll learn how to create a neon glowing sphere using only CSS — no JavaScript, no external libraries, just modern CSS magic.

Perfect for UI backdrops, loading screens, sci-fi dashboards, or interactive experiments.

🧠 Features
Pure CSS (no JS at all)

Neon glow with soft pulse

Randomized flicker animation

Internal shimmer highlight

Fully customizable & reusable

Image description

https://codepen.io/andysay1/pen/bNNZOoL

📦 HTML Markup
Simple and clean — just a single div

<div class="neon-sphere"></div>
Enter fullscreen mode Exit fullscreen mode 
body {
  margin: 0;
  height: 100vh;
  display: flex;
  background: radial-gradient(ellipse at bottom, #01010f 0%, #000 100%);
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  overflow: hidden;
}

.neon-sphere {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #00ffff 5%, #002b36 60%, #000 100%);
  box-shadow:
    0 0 20px #0ff,
    0 0 40px #0ff,
    0 0 60px #0ff,
    inset 0 0 30px #0ff;

  position: relative;
}

.neon-sphere::after {
  content: "";
  position: absolute;
  top: 15%;
  left: 15%;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 70%);
  border-radius: 50%;
  filter: blur(8px);
  animation: shimmer 6s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 20px #0ff,
      0 0 40px #0ff,
      0 0 60px #0ff,
      inset 0 0 30px #0ff;
  }
  50% {
    transform: scale(1.05);
    box-shadow:
      0 0 30px #0ff,
      0 0 60px #0ff,
      0 0 90px #0ff,
      inset 0 0 40px #0ff;
  }
}

@keyframes shimmer {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(10px, 10px);
  }
}
Enter fullscreen mode Exit fullscreen mode

🎯 Use Cases
Glowing sci-fi buttons or power cores

Loading screens or visual transitions

Interactive dashboards or ambient widgets

Background elements for immersive UIs

🖖 Wrap Up
This glowing orb is a small demo of what CSS can do in 2025. No canvas, no JS, no WebGL. Just raw CSS effects.

If you enjoyed this, give it a ❤️ and share your remix! Follow me for more creative UI explorations.

Top comments (0)