WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Neon Glowing Effect
2613
Sado0zii_Dev
Open In Editor
Publish Your Code
Recommended
11 December 2024
Glowing Loader
24 February 2025
Neon Login Form
21 October 2024
Dropdown Menu Effects
HTML
Copy
Neon Glowing Effect
CSS
Copy
body{ margin: 0; padding: 0; background-color: black; } ul{ position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); margin: 0; padding: 0; display: flex; } ul li{ list-style: none; width: 40px; height: 40px; background: white; border-radius: 50%; animation: glow 1.6s ease-in-out infinite; } @keyframes glow{ 0%,40%,100% { transform: scale(0.2); } 20%{ transform:scale(1); } } ul li:nth-child(1){ animation-delay: -1.4s; background: yellow; box-shadow:0 0 50px yellow; } ul li:nth-child(2){ animation-delay: -1.2s; background: red; box-shadow:0 0 50px red; } ul li:nth-child(3){ animation-delay: -1s; background: green; box-shadow:0 0 50px green; } ul li:nth-child(4){ animation-delay: -0.8s; background: orangered; box-shadow:0 0 50px orangered; } ul li:nth-child(5){ animation-delay: -0.6s; background: blue; box-shadow:0 0 50px blue; } ul li:nth-child(6){ animation-delay: -0.4s; background:purple ; box-shadow:0 0 50px purple; } ul li:nth-child(7){ animation-delay: -0.2s; background: rgb(212, 6, 199); box-shadow:0 0 50px rgb(212, 6, 199); }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */