Adding RGB glow effect is very simple and just takes a few lines of code . First add a simple div and give id glowbox to add the rgb effect
<body>
<div id="glowbox"></div>
</body>
We then need to add a javascript functions that changes the color of the border and box shadow randomly .
const color_change = () => {
var red = Math.floor(Math.random() * 255);
var green = Math.floor(Math.random() * 255);
var blue = Math.floor(Math.random() * 255);
document.getElementById(
"glowbox"
).style.boxShadow = `0 0 100px 0 rgba(${red}, ${green}, ${blue},0.5)`;
document.getElementById(
"glowbox"
).style.border = `2px solid rgba(${red}, ${green}, ${blue},0.5)`;
};
To make the effect like rgb light glow call the above function by setinterval
setInterval(color_change, 600);
you must see the glow effect by now .Make sure you have added some width and height to your div
Here is the full code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<script>
const color_change = () => {
var red = Math.floor(Math.random() * 255);
var green = Math.floor(Math.random() * 255);
var blue = Math.floor(Math.random() * 255);
document.getElementById(
"glowbox"
).style.boxShadow = `0 0 100px 0 rgba(${red}, ${green}, ${blue},0.5)`;
document.getElementById(
"glowbox"
).style.border = `2px solid rgba(${red}, ${green}, ${blue},0.5)`;
};
setInterval(color_change, 600);
</script>
<style>
#glowbox {
width: 500px;
height: 500px;
}
body {
background-color: black;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="glowbox"></div>
</body>
</html>
Let me know if you will add this in your website in comments .