diff --git a/Components/Backgrounds/Colour-Shifting-Background/index.html b/Components/Backgrounds/Colour-Shifting-Background/index.html
new file mode 100644
index 00000000..0f14c5c9
--- /dev/null
+++ b/Components/Backgrounds/Colour-Shifting-Background/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+ Colour Shifting Background
+
+
+ Beautiify
+
+
\ No newline at end of file
diff --git a/Components/Backgrounds/Colour-Shifting-Background/style.css b/Components/Backgrounds/Colour-Shifting-Background/style.css
new file mode 100644
index 00000000..b02f996f
--- /dev/null
+++ b/Components/Backgrounds/Colour-Shifting-Background/style.css
@@ -0,0 +1,24 @@
+body {
+ margin: 0;
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: linear-gradient(45deg, #ff0000, #0000ff);
+ background-size: 200% 200%;
+ animation: bgShift 6s infinite alternate;
+}
+
+@keyframes bgShift {
+ 0% {
+ background-position: 0% 50%;
+ }
+ 100% {
+ background-position: 100% 50%;
+ }
+}
+
+h1 {
+ color: white;
+ font-family: Arial, sans-serif;
+}
\ No newline at end of file
diff --git a/assets/json_files/backgrounds.json b/assets/json_files/backgrounds.json
index e7d7e98f..3650c7b0 100644
--- a/assets/json_files/backgrounds.json
+++ b/assets/json_files/backgrounds.json
@@ -49,6 +49,11 @@
"previewLink": "../../Components/Backgrounds/Colour-Drop-Background/index.html",
"sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Backgrounds/Colour-Drop-Background"
},
+ {
+ "title": "Colour Shifting Background",
+ "previewLink": "../../Components/Backgrounds/Colour-Shifting-Background/index.html",
+ "sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Backgrounds/Colour-Shifting-Background"
+ },
{
"title": "Connecting Dots Background",
"previewLink": "../../Components/Backgrounds/Connecting-Dots-Background/index.html",