Multicolor Glow

This will add a multicolored glow to text or boxes.

Utility

It makes glowing stuff extra fancy.

Manufacturing

The "box-shadow" and "text-shadow" properties accept multiple sets of parameters, which allows us to layer multiple shadows on top of each other.

One Color

Hello World!

Hello World!

.user-css .box-glow{
box-shadow: -5px -5px 10px red;
}

.user-css .text-glow{
text-shadow: -5px -5px 10px red;
}

Two Colors

Hello World!

Hello World!

.user-css .box-glow{
box-shadow: -5px -5px 10px red,
5px -5px 10px yellow;
}

.user-css .text-glow{
text-shadow: -5px -5px 10px red,
5px -5px 10px yellow;
}

Four Colors

Hello World!

Hello World!

.user-css .box-glow{
box-shadow: -5px -5px 10px red,
5px -5px 10px yellow,
5px 5px 10px green,
-5px 5px 10px blue;
}

.user-css .text-glow{
text-shadow: -5px -5px 10px red,
5px -5px 10px yellow,
5px 5px 10px green,
-5px 5px 10px blue;
}

Table of Contents

Access & Availability

Journeyman

Complexity

CSS

Discovery

experimenting after browsing W3Schools

Additional Tip

If you want to apply such a complex effect to different elements, consider using CSS variables.

Hello World!

:root{
--rainbow-glow-color1:
rgba(70,90,255,0.5);
--rainbow-glow-color2:
rgba(255, 25, 30, 0.5);
--rainbow-glow-color3:
rgba(255, 200,0,0.5);
--rainbow-glow-color4:
rgba(10,255,130,0.5);
--rainbow-glow:
3px -3px 5px
var(--rainbow-glow-color1),
3px 3px 5px
var(--rainbow-glow-color2),
-3px 3px 5px
var(--rainbow-glow-color3),
-3px -3px 5px
var(--rainbow-glow-color4);
}

.user-css .rainbow-glow{
box-shadow:var(--rainbow-glow);
text-shadow:var(--rainbow-glow);
}