CSS Glowing Orbit Animation with box-shadow

Creating glowing animations with CSS is simpler than it looks. In this short guide, we’ll build a glowing orbit effect using pure CSS. We’ll use just a few properties – box-shadow, border-radius, and @keyframes. No JavaScript, no libraries.

HTML

<div class="orbit-circle">
  <div class="orbit-object">
    <span class="ripple"></span>
  </div>
</div>

CSS

.orbit-circle {
  display: inline-block;
  position: relative;
  height: 100px;
  width: 100px;
  transform-origin: center;
  border: 5px solid white;
  border-radius: 50%;
  box-shadow: 0 0 15px #4bbce7;
  box-sizing: border-box;
  animation: orbit 10s infinite linear;
  animation-delay: 0.25s;
}

.orbit-object {
  background-color: #fff;
  position: absolute;
  top: 15px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow:
    0px 0px 10px #54f7f8,
    0px 0px 20px #54f7f8,
    0px 0px 30px #54f7f8,
    0px 0px 50px #54f7f8,
    0px 0px 60px #54f7f8;
}

.ripple {
  position: relative;
  top: -10px;
  left: 0px;
  width: 5px;
  height: 5px;
  padding: 5px;
  font-size: 0px;
  border-radius: 50%;
  box-shadow:
    0 0 0 rgba(84, 247, 248, 0.1),
    0 0 5px rgba(84, 247, 248, 0.1),
    0 0 10px rgba(84, 247, 248, 0.1),
    0 0 15px rgba(84, 247, 248, 0.1);
  background-color: transparent;
  animation: ripple 1s infinite linear;
}

@keyframes orbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes ripple {
  0% {
    box-shadow:
      0 0 0 rgba(84, 247, 248, 0.1),
      0 0 5px rgba(84, 247, 248, 0.1),
      0 0 10px rgba(84, 247, 248, 0.1),
      0 0 15px rgba(84, 247, 248, 0.1);
  }

  100% {
    box-shadow:				
      0 0 5px rgba(84, 247, 248, 0.1),
      0 0 10px rgba(84, 247, 248, 0.1),
      0 0 15px rgba(84, 247, 248, 0.1),
      0 0 20px rgba(84, 247, 248, 0);
  }
}

Understanding the structure

The .orbit-circle is the main container – it creates the circular path. Inside it, the .orbit-object is the glowing element that moves along the orbit. The small .ripple adds a subtle pulsing effect. Together, they create a glowing loop that continuously rotates.

Focus on box-shadow

The visual glow comes entirely from box-shadow. By stacking multiple layers of shadow, we simulate a light source.

...
box-shadow:
  0px 0px 10px #54f7f8,
  0px 0px 20px #54f7f8,
  0px 0px 30px #54f7f8,
  0px 0px 50px #54f7f8,
  0px 0px 60px #54f7f8;
...

Each shadow adds a level of blur and brightness. The closer the value to zero, the sharper the glow. Increasing the blur radius creates a soft neon halo. This approach is flexible – you can easily change the glow color or intensity by adjusting these values. If you want to experiment with this effect, try our CSS box-shadow generator to create and preview custom glow styles in real time.

Focus on border-radius

As you can see in this snippet, box-shadow does most of the visual work, while a simple border-radius value is used to shape the element. Try our CSS border-radius generator to experiment with smooth curves or even unusual shapes and see how small changes can completely transform the look.

How @keyframes drive the motion

The animation uses two sets of keyframes: one for rotation and one for the ripple pulse. The rotation makes the orbit-object travel around the circle.

...
@keyframes orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
...

The ripple animation is faster and adds energy to the glow.

...
@keyframes ripple {
  0% { box-shadow: 0 0 0 rgba(84, 247, 248, 0.1); }
  100% { box-shadow: 0 0 20px rgba(84, 247, 248, 0); }
}
...

Together they create a continuous, rhythmic motion. The linear timing keeps it smooth, while infinite ensures it loops endlessly.

Tips for customization

Change the orbit size by adjusting .orbit-circle height and width.
Experiment with different colors for the glow.
Use slower or faster durations in animation for unique effects.
Add multiple .orbit-object elements for a multi-orbit system.

Why it works well

This technique uses transform for motion and box-shadow for glow – both are GPU-optimized and perform well in browsers. It’s a perfect fit for UI effects like loaders, spinners, or background decorations.