This is an example of how to use CSS filters to change your website's style into Halloween mode in just a few lines of CSS.
It is super scary!
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Nosifer&display=swap');
.halloween {
background-image: linear-gradient(red, darkred);
filter: grayscale(1) invert(1) brightness(1.1);
mix-blend-mode: luminosity;
}
.halloween h1, .halloween h2, .halloween h3,
.halloween h4, .halloween h5, .halloween h6 {
font-family: Nosifer !important;
}
</style>
In our example, we use the .halloween class to turn on styles. The switcher at the beginning of the page adds or removes it from the body.
To start, we set our website background to a linear gradient in shades of red.
It should be bloody!
Next, we use a few useful filters:
Finally, we need to mix our red background with content! We choosed "luminosity" as a blend mode, but you can try other modes for best readability. Please note that Safari doesn't support all modes listed at this URL.
The last element that will add a scary look to our site is the font! We chose Nosifer because it is bloody!
That's all for this mini tutorial. We wish you a great Halloween and a fantastic fall!
Use Shuffle AI to build websites in no time.
Build websites faster with an AI Visual Editor
© 2026 Shuffle. All rights reserved.
See what you're getting before you commit.
Switch the editor to Grid and every page of your project appears side by side on one canvas. Arrange them freely, zoom in and out, and add as many new pages as you need in a few clicks.
Describe what you need in one chat and the Agent does the rest: it adds new sections, edits copy and styles, moves blocks around or removes them across your whole page. No modes, no switching, just tell it what to change.
Not quite there yet? Ask for tweaks like missing assets, your logo or other details, and regenerate the design without starting from scratch.