Skip to content

Instantly share code, notes, and snippets.

@lokka30

lokka30/rainbow-background.html

Created July 22, 2022 11:52
Show Gist options
  • Save lokka30/d6b46fd230c698315ff2bbd6eab2298d to your computer and use it in GitHub Desktop.
Save lokka30/d6b46fd230c698315ff2bbd6eab2298d to your computer and use it in GitHub Desktop.
Download ZIP
Rainbow animated website background using pure CSS or JavaScript
Raw
rainbow-background.html
<!DOCTYPE HTML>
<html>
<head>
<style>
@keyframes rainbow-background {
0% { background-color: hsl(0, 50%, 50%); }
0.5% { background-color: hsl(1.8, 50%, 50%); }
1% { background-color: hsl(3.6, 50%, 50%); }
1.5% { background-color: hsl(5.4, 50%, 50%); }
2% { background-color: hsl(7.2, 50%, 50%); }
2.5% { background-color: hsl(9, 50%, 50%); }
3% { background-color: hsl(10.8, 50%, 50%); }
3.5% { background-color: hsl(12.6, 50%, 50%); }
4% { background-color: hsl(14.4, 50%, 50%); }
4.5% { background-color: hsl(16.2, 50%, 50%); }
5% { background-color: hsl(18, 50%, 50%); }
5.5% { background-color: hsl(19.8, 50%, 50%); }
6% { background-color: hsl(21.6, 50%, 50%); }
6.5% { background-color: hsl(23.4, 50%, 50%); }
7% { background-color: hsl(25.2, 50%, 50%); }
7.5% { background-color: hsl(27, 50%, 50%); }
8% { background-color: hsl(28.8, 50%, 50%); }
8.5% { background-color: hsl(30.6, 50%, 50%); }
9% { background-color: hsl(32.4, 50%, 50%); }
9.5% { background-color: hsl(34.2, 50%, 50%); }
10% { background-color: hsl(36, 50%, 50%); }
10.5% { background-color: hsl(37.8, 50%, 50%); }
11% { background-color: hsl(39.6, 50%, 50%); }
11.5% { background-color: hsl(41.4, 50%, 50%); }
12% { background-color: hsl(43.2, 50%, 50%); }
12.5% { background-color: hsl(45, 50%, 50%); }
13% { background-color: hsl(46.8, 50%, 50%); }
13.5% { background-color: hsl(48.6, 50%, 50%); }
14% { background-color: hsl(50.4, 50%, 50%); }
14.5% { background-color: hsl(52.2, 50%, 50%); }
15% { background-color: hsl(54, 50%, 50%); }
15.5% { background-color: hsl(55.8, 50%, 50%); }
16% { background-color: hsl(57.6, 50%, 50%); }
16.5% { background-color: hsl(59.4, 50%, 50%); }
17% { background-color: hsl(61.2, 50%, 50%); }
17.5% { background-color: hsl(63, 50%, 50%); }
18% { background-color: hsl(64.8, 50%, 50%); }
18.5% { background-color: hsl(66.6, 50%, 50%); }
19% { background-color: hsl(68.4, 50%, 50%); }
19.5% { background-color: hsl(70.2, 50%, 50%); }
20% { background-color: hsl(72, 50%, 50%); }
20.5% { background-color: hsl(73.8, 50%, 50%); }
21% { background-color: hsl(75.6, 50%, 50%); }
21.5% { background-color: hsl(77.4, 50%, 50%); }
22% { background-color: hsl(79.2, 50%, 50%); }
22.5% { background-color: hsl(81, 50%, 50%); }
23% { background-color: hsl(82.8, 50%, 50%); }
23.5% { background-color: hsl(84.6, 50%, 50%); }
24% { background-color: hsl(86.4, 50%, 50%); }
24.5% { background-color: hsl(88.2, 50%, 50%); }
25% { background-color: hsl(90, 50%, 50%); }
25.5% { background-color: hsl(91.8, 50%, 50%); }
26% { background-color: hsl(93.6, 50%, 50%); }
26.5% { background-color: hsl(95.4, 50%, 50%); }
27% { background-color: hsl(97.2, 50%, 50%); }
27.5% { background-color: hsl(99, 50%, 50%); }
28% { background-color: hsl(100.8, 50%, 50%); }
28.5% { background-color: hsl(102.6, 50%, 50%); }
29% { background-color: hsl(104.4, 50%, 50%); }
29.5% { background-color: hsl(106.2, 50%, 50%); }
30% { background-color: hsl(108, 50%, 50%); }
30.5% { background-color: hsl(109.8, 50%, 50%); }
31% { background-color: hsl(111.6, 50%, 50%); }
31.5% { background-color: hsl(113.4, 50%, 50%); }
32% { background-color: hsl(115.2, 50%, 50%); }
32.5% { background-color: hsl(117, 50%, 50%); }
33% { background-color: hsl(118.8, 50%, 50%); }
33.5% { background-color: hsl(120.6, 50%, 50%); }
34% { background-color: hsl(122.4, 50%, 50%); }
34.5% { background-color: hsl(124.2, 50%, 50%); }
35% { background-color: hsl(126, 50%, 50%); }
35.5% { background-color: hsl(127.8, 50%, 50%); }
36% { background-color: hsl(129.6, 50%, 50%); }
36.5% { background-color: hsl(131.4, 50%, 50%); }
37% { background-color: hsl(133.2, 50%, 50%); }
37.5% { background-color: hsl(135, 50%, 50%); }
38% { background-color: hsl(136.8, 50%, 50%); }
38.5% { background-color: hsl(138.6, 50%, 50%); }
39% { background-color: hsl(140.4, 50%, 50%); }
39.5% { background-color: hsl(142.2, 50%, 50%); }
40% { background-color: hsl(144, 50%, 50%); }
40.5% { background-color: hsl(145.8, 50%, 50%); }
41% { background-color: hsl(147.6, 50%, 50%); }
41.5% { background-color: hsl(149.4, 50%, 50%); }
42% { background-color: hsl(151.2, 50%, 50%); }
42.5% { background-color: hsl(153, 50%, 50%); }
43% { background-color: hsl(154.8, 50%, 50%); }
43.5% { background-color: hsl(156.6, 50%, 50%); }
44% { background-color: hsl(158.4, 50%, 50%); }
44.5% { background-color: hsl(160.2, 50%, 50%); }
45% { background-color: hsl(162, 50%, 50%); }
45.5% { background-color: hsl(163.8, 50%, 50%); }
46% { background-color: hsl(165.6, 50%, 50%); }
46.5% { background-color: hsl(167.4, 50%, 50%); }
47% { background-color: hsl(169.2, 50%, 50%); }
47.5% { background-color: hsl(171, 50%, 50%); }
48% { background-color: hsl(172.8, 50%, 50%); }
48.5% { background-color: hsl(174.6, 50%, 50%); }
49% { background-color: hsl(176.4, 50%, 50%); }
49.5% { background-color: hsl(178.2, 50%, 50%); }
50% { background-color: hsl(180, 50%, 50%); }
50.5% { background-color: hsl(181.8, 50%, 50%); }
51% { background-color: hsl(183.6, 50%, 50%); }
51.5% { background-color: hsl(185.4, 50%, 50%); }
52% { background-color: hsl(187.2, 50%, 50%); }
52.5% { background-color: hsl(189, 50%, 50%); }
53% { background-color: hsl(190.8, 50%, 50%); }
53.5% { background-color: hsl(192.6, 50%, 50%); }
54% { background-color: hsl(194.4, 50%, 50%); }
54.5% { background-color: hsl(196.2, 50%, 50%); }
55% { background-color: hsl(198, 50%, 50%); }
55.5% { background-color: hsl(199.8, 50%, 50%); }
56% { background-color: hsl(201.6, 50%, 50%); }
56.5% { background-color: hsl(203.4, 50%, 50%); }
57% { background-color: hsl(205.2, 50%, 50%); }
57.5% { background-color: hsl(207, 50%, 50%); }
58% { background-color: hsl(208.8, 50%, 50%); }
58.5% { background-color: hsl(210.6, 50%, 50%); }
59% { background-color: hsl(212.4, 50%, 50%); }
59.5% { background-color: hsl(214.2, 50%, 50%); }
60% { background-color: hsl(216, 50%, 50%); }
60.5% { background-color: hsl(217.8, 50%, 50%); }
61% { background-color: hsl(219.6, 50%, 50%); }
61.5% { background-color: hsl(221.4, 50%, 50%); }
62% { background-color: hsl(223.2, 50%, 50%); }
62.5% { background-color: hsl(225, 50%, 50%); }
63% { background-color: hsl(226.8, 50%, 50%); }
63.5% { background-color: hsl(228.6, 50%, 50%); }
64% { background-color: hsl(230.4, 50%, 50%); }
64.5% { background-color: hsl(232.2, 50%, 50%); }
65% { background-color: hsl(234, 50%, 50%); }
65.5% { background-color: hsl(235.8, 50%, 50%); }
66% { background-color: hsl(237.6, 50%, 50%); }
66.5% { background-color: hsl(239.4, 50%, 50%); }
67% { background-color: hsl(241.2, 50%, 50%); }
67.5% { background-color: hsl(243, 50%, 50%); }
68% { background-color: hsl(244.8, 50%, 50%); }
68.5% { background-color: hsl(246.6, 50%, 50%); }
69% { background-color: hsl(248.4, 50%, 50%); }
69.5% { background-color: hsl(250.2, 50%, 50%); }
70% { background-color: hsl(252, 50%, 50%); }
70.5% { background-color: hsl(253.8, 50%, 50%); }
71% { background-color: hsl(255.6, 50%, 50%); }
71.5% { background-color: hsl(257.4, 50%, 50%); }
72% { background-color: hsl(259.2, 50%, 50%); }
72.5% { background-color: hsl(261, 50%, 50%); }
73% { background-color: hsl(262.8, 50%, 50%); }
73.5% { background-color: hsl(264.6, 50%, 50%); }
74% { background-color: hsl(266.4, 50%, 50%); }
74.5% { background-color: hsl(268.2, 50%, 50%); }
75% { background-color: hsl(270, 50%, 50%); }
75.5% { background-color: hsl(271.8, 50%, 50%); }
76% { background-color: hsl(273.6, 50%, 50%); }
76.5% { background-color: hsl(275.4, 50%, 50%); }
77% { background-color: hsl(277.2, 50%, 50%); }
77.5% { background-color: hsl(279, 50%, 50%); }
78% { background-color: hsl(280.8, 50%, 50%); }
78.5% { background-color: hsl(282.6, 50%, 50%); }
79% { background-color: hsl(284.4, 50%, 50%); }
79.5% { background-color: hsl(286.2, 50%, 50%); }
80% { background-color: hsl(288, 50%, 50%); }
80.5% { background-color: hsl(289.8, 50%, 50%); }
81% { background-color: hsl(291.6, 50%, 50%); }
81.5% { background-color: hsl(293.4, 50%, 50%); }
82% { background-color: hsl(295.2, 50%, 50%); }
82.5% { background-color: hsl(297, 50%, 50%); }
83% { background-color: hsl(298.8, 50%, 50%); }
83.5% { background-color: hsl(300.6, 50%, 50%); }
84% { background-color: hsl(302.4, 50%, 50%); }
84.5% { background-color: hsl(304.2, 50%, 50%); }
85% { background-color: hsl(306, 50%, 50%); }
85.5% { background-color: hsl(307.8, 50%, 50%); }
86% { background-color: hsl(309.6, 50%, 50%); }
86.5% { background-color: hsl(311.4, 50%, 50%); }
87% { background-color: hsl(313.2, 50%, 50%); }
87.5% { background-color: hsl(315, 50%, 50%); }
88% { background-color: hsl(316.8, 50%, 50%); }
88.5% { background-color: hsl(318.6, 50%, 50%); }
89% { background-color: hsl(320.4, 50%, 50%); }
89.5% { background-color: hsl(322.2, 50%, 50%); }
90% { background-color: hsl(324, 50%, 50%); }
90.5% { background-color: hsl(325.8, 50%, 50%); }
91% { background-color: hsl(327.6, 50%, 50%); }
91.5% { background-color: hsl(329.4, 50%, 50%); }
92% { background-color: hsl(331.2, 50%, 50%); }
92.5% { background-color: hsl(333, 50%, 50%); }
93% { background-color: hsl(334.8, 50%, 50%); }
93.5% { background-color: hsl(336.6, 50%, 50%); }
94% { background-color: hsl(338.4, 50%, 50%); }
94.5% { background-color: hsl(340.2, 50%, 50%); }
95% { background-color: hsl(342, 50%, 50%); }
95.5% { background-color: hsl(343.8, 50%, 50%); }
96% { background-color: hsl(345.6, 50%, 50%); }
96.5% { background-color: hsl(347.4, 50%, 50%); }
97% { background-color: hsl(349.2, 50%, 50%); }
97.5% { background-color: hsl(351, 50%, 50%); }
98% { background-color: hsl(352.8, 50%, 50%); }
98.5% { background-color: hsl(354.6, 50%, 50%); }
99% { background-color: hsl(356.4, 50%, 50%); }
99.5% { background-color: hsl(358.2, 50%, 50%); }
100% { background-color: hsl(360, 50%, 50%); }
}
.rainbow-background {
animation: rainbow-background 5s infinite;
}
</style>
<!-- Alternative to CSS animation using pure JavaScript.
<script>
let current = 0.0;
setInterval(function() {
document.body.style.backgroundColor = "hsl(" + current + ", 50%, 50%)";
if(current >= 360.0) {
current = 0.0;
} else {
current += 0.5;
}
}, 5);
</script>
-->
<!-- Generates hue list. Tabs look great in the browser console, but misalign when copied as text.
for(let i = 0.0; i <= 100.0; i += 0.5) {
console.log(i + "%\t\t{ background-color: hsl(" + (i * 3.6) + ", 50%, 50%); }");
}
-->
</head>
<body class="rainbow-background">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment