diff --git a/modules/ui/stylePresets.js b/modules/ui/stylePresets.js
index 460b713d..05302577 100644
--- a/modules/ui/stylePresets.js
+++ b/modules/ui/stylePresets.js
@@ -299,7 +299,9 @@ function addStylePreset() {
         "font-family",
         "filter"
       ],
-      "#fogging": ["opacity", "fill", "filter"]
+      "#fogging": ["opacity", "fill", "filter"],
+      "#vignette": ["opacity", "fill", "filter"],
+      "#vignette-rect": ["x", "y", "width", "height", "rx", "ry", "filter"]
     };
 
     for (const selector in attributes) {
diff --git a/styles/ancient.json b/styles/ancient.json
index a1c3f1ea..2c58383e 100644
--- a/styles/ancient.json
+++ b/styles/ancient.json
@@ -384,5 +384,19 @@
     "opacity": 0.98,
     "fill": "#30426f",
     "filter": null
+  },
+  "#vignette": {
+    "opacity": 0.3,
+    "fill": "#000000",
+    "filter": null
+  },
+  "#vignette-rect": {
+    "x": "0.3%",
+    "y": "0.4%",
+    "width": "99.6%",
+    "height": "99.2%",
+    "rx": "5%",
+    "ry": "5%",
+    "filter": "blur(20px)"
   }
 }
diff --git a/styles/atlas.json b/styles/atlas.json
index 1a44619f..2a3698d3 100644
--- a/styles/atlas.json
+++ b/styles/atlas.json
@@ -384,5 +384,19 @@
     "opacity": 0.98,
     "fill": "#30426f",
     "filter": null
+  },
+  "#vignette": {
+    "opacity": 0.3,
+    "fill": "#000000",
+    "filter": null
+  },
+  "#vignette-rect": {
+    "x": "0.3%",
+    "y": "0.4%",
+    "width": "99.6%",
+    "height": "99.2%",
+    "rx": "5%",
+    "ry": "5%",
+    "filter": "blur(20px)"
   }
 }
diff --git a/styles/clean.json b/styles/clean.json
index 4282202c..b353fcd5 100644
--- a/styles/clean.json
+++ b/styles/clean.json
@@ -386,5 +386,19 @@
     "opacity": 1,
     "fill": "#ffffff",
     "filter": null
+  },
+  "#vignette": {
+    "opacity": 0.3,
+    "fill": "#000000",
+    "filter": null
+  },
+  "#vignette-rect": {
+    "x": "0.3%",
+    "y": "0.4%",
+    "width": "99.6%",
+    "height": "99.2%",
+    "rx": "5%",
+    "ry": "5%",
+    "filter": "blur(20px)"
   }
 }
diff --git a/styles/cyberpunk.json b/styles/cyberpunk.json
index 2a24002e..5274cb2b 100644
--- a/styles/cyberpunk.json
+++ b/styles/cyberpunk.json
@@ -384,5 +384,19 @@
     "opacity": 0.98,
     "fill": "#1b1423",
     "filter": null
+  },
+  "#vignette": {
+    "opacity": 0.3,
+    "fill": "#000000",
+    "filter": null
+  },
+  "#vignette-rect": {
+    "x": "0.3%",
+    "y": "0.4%",
+    "width": "99.6%",
+    "height": "99.2%",
+    "rx": "5%",
+    "ry": "5%",
+    "filter": "blur(20px)"
   }
 }
diff --git a/styles/gloom.json b/styles/gloom.json
index 897aa1d3..ec602737 100644
--- a/styles/gloom.json
+++ b/styles/gloom.json
@@ -386,5 +386,19 @@
     "opacity": 0.98,
     "fill": "#1b1423",
     "filter": null
+  },
+  "#vignette": {
+    "opacity": 0.3,
+    "fill": "#000000",
+    "filter": null
+  },
+  "#vignette-rect": {
+    "x": "0.3%",
+    "y": "0.4%",
+    "width": "99.6%",
+    "height": "99.2%",
+    "rx": "5%",
+    "ry": "5%",
+    "filter": "blur(20px)"
   }
 }
diff --git a/styles/light.json b/styles/light.json
index 34ef841f..e8209b7e 100644
--- a/styles/light.json
+++ b/styles/light.json
@@ -384,5 +384,19 @@
     "opacity": 1,
     "fill": "#30426f",
     "filter": null
+  },
+  "#vignette": {
+    "opacity": 0.3,
+    "fill": "#000000",
+    "filter": null
+  },
+  "#vignette-rect": {
+    "x": "0.3%",
+    "y": "0.4%",
+    "width": "99.6%",
+    "height": "99.2%",
+    "rx": "5%",
+    "ry": "5%",
+    "filter": "blur(20px)"
   }
 }
diff --git a/styles/monochrome.json b/styles/monochrome.json
index c512fdc4..23ff7a48 100644
--- a/styles/monochrome.json
+++ b/styles/monochrome.json
@@ -380,5 +380,19 @@
     "opacity": 0.98,
     "fill": "#30426f",
     "filter": null
+  },
+  "#vignette": {
+    "opacity": 0.3,
+    "fill": "#000000",
+    "filter": null
+  },
+  "#vignette-rect": {
+    "x": "0.3%",
+    "y": "0.4%",
+    "width": "99.6%",
+    "height": "99.2%",
+    "rx": "5%",
+    "ry": "5%",
+    "filter": "blur(20px)"
   }
 }
diff --git a/styles/night.json b/styles/night.json
index 0f0820d1..c067bdd0 100644
--- a/styles/night.json
+++ b/styles/night.json
@@ -384,5 +384,19 @@
     "opacity": 0.8,
     "fill": "#000000",
     "filter": null
+  },
+  "#vignette": {
+    "opacity": 0.3,
+    "fill": "#000000",
+    "filter": null
+  },
+  "#vignette-rect": {
+    "x": "0.3%",
+    "y": "0.4%",
+    "width": "99.6%",
+    "height": "99.2%",
+    "rx": "5%",
+    "ry": "5%",
+    "filter": "blur(20px)"
   }
 }
diff --git a/styles/pale.json b/styles/pale.json
index 60cca2e9..efa6b6d1 100644
--- a/styles/pale.json
+++ b/styles/pale.json
@@ -384,5 +384,19 @@
     "opacity": 1,
     "fill": "#30426f",
     "filter": null
+  },
+  "#vignette": {
+    "opacity": 0.3,
+    "fill": "#000000",
+    "filter": null
+  },
+  "#vignette-rect": {
+    "x": "0.3%",
+    "y": "0.4%",
+    "width": "99.6%",
+    "height": "99.2%",
+    "rx": "5%",
+    "ry": "5%",
+    "filter": "blur(20px)"
   }
 }
diff --git a/styles/watercolor.json b/styles/watercolor.json
index d52c4da9..d0768b8b 100644
--- a/styles/watercolor.json
+++ b/styles/watercolor.json
@@ -384,5 +384,19 @@
     "opacity": 0.97,
     "fill": "#8398ce",
     "filter": null
+  },
+  "#vignette": {
+    "opacity": 0.3,
+    "fill": "#000000",
+    "filter": null
+  },
+  "#vignette-rect": {
+    "x": "0.3%",
+    "y": "0.4%",
+    "width": "99.6%",
+    "height": "99.2%",
+    "rx": "5%",
+    "ry": "5%",
+    "filter": "blur(20px)"
   }
 }