Here you go. Cleaned up my code. You can use this extension, and apply css to all pages. It should be fairly intuitive to tweak, and ChatGPT is great for making changes. That extension will update any open page live as you edit.
I use this to apply a weak shadow around the page and some other mods. Added an example filter effect as well. Just remove what you don't need.
/* Stuff to insert element and make it unclickable. Dont modify anything before the line. */
body {
position: relative;
}
html::before,
body::before {
content: "";
top: 0;
left: 0;
pointer-events: none;
user-select: none;
min-height: 100vh;
z-index: 99999999;
box-sizing: border-box;
}
html::before {
position: fixed;
width: 100vw;
height: 100vh;
}
body::before {
position: absolute;
width: 100%;
height: 100%;
}
/* --------------------------------------------------------- */
/* 1. Font changes for all elements */
* {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke: 0.015em;
text-shadow: 0px 0 10px #8c8c8c17;
}
/* 2. Fixed overlay that doesn't move */
html::before {
box-shadow: inset 0 0 500px 0px #0000004f;
opacity: 0.5;
border: 1px solid white;
border-radius: 8px; /* Fit with the border rounding in Edge */
}
/* 3. Overlay that follows the page as you scroll */
body::before {
background: url('https://img.freepik.com/free-vector/outline-flat-seamless-arabic-geometric-ornament-pattern_1409-4191.jpg') top center; /* Random image from the web */
background-size: 300px;
mix-blend-mode: screen; /* Blend modes like in Photoshop, somewhat GPU intensive, watch for scroll lag */
opacity: 0.25;
}
/* 4. Reduce saturation by 50% */
body {
filter: saturate(0.5) brightness(0.9)
}
