diff --git a/src/Library/demos/CSS Gradient/main.blp b/src/Library/demos/CSS Gradient/main.blp
new file mode 100644
index 000000000..8ec45f301
--- /dev/null
+++ b/src/Library/demos/CSS Gradient/main.blp	
@@ -0,0 +1,20 @@
+using Gtk 4.0;
+using Adw 1;
+
+Adw.StatusPage {
+  title: "CSS Gradient";
+  description: _("Give Gtk widgets a psychedelic touch");
+
+  Box {
+    orientation: vertical;
+    halign: center;
+
+    Button regular {
+      name: "primary";
+      label: "Regular";
+      styles ["pill", "psychedelic-pill"]
+    }
+  }
+  styles ["psychedelic-bg"]
+}
+
diff --git a/src/Library/demos/CSS Gradient/main.css b/src/Library/demos/CSS Gradient/main.css
new file mode 100644
index 000000000..c8c036a3f
--- /dev/null
+++ b/src/Library/demos/CSS Gradient/main.css	
@@ -0,0 +1,17 @@
+/* A static gradient background for the outer box */
+.psychedelic-bg {
+	background: linear-gradient(15deg, #001430, #242424, #140000);
+	background-size: 100% 100%;
+}
+/* The top window borders are normally removed if psychedelic-bg is used on the whole window */
+.psychedelic-bg headerbar {
+  border: none;
+  box-shadow: none;
+}
+
+/* A rainbow sliding gradient for the pill widget itself */
+.psychedelic-pill{
+	background: linear-gradient(-45deg, #ed7650, #e5307f, #24a4d2, #24d8af);
+	background-size: 400% 400%;
+	animation: gradient 15s ease infinite;
+}
diff --git a/src/Library/demos/CSS Gradient/main.json b/src/Library/demos/CSS Gradient/main.json
new file mode 100644
index 000000000..70a60f3ac
--- /dev/null
+++ b/src/Library/demos/CSS Gradient/main.json	
@@ -0,0 +1,6 @@
+{
+  "category": "controls",
+  "description": "Add an animated CSS gradient to spice up your widgets",
+  "panels": ["ui", "preview"],
+  "autorun": true
+}