Building a Halloween Dashboard with Spotlight Effect, CSS Masks, and Flexmonster

Daria Filozop — Mon, 10 Nov 2025 13:27:51 GMT

Even though Halloween passed a few days ago, its spirit is still in the air, and I'm always up for a new challenge. As a developer who works with tables, reports, and dev libraries, I decided to add some eerie vibe to data visualization.

So, in this quick tutorial, I’ll show how spooky CSS masks can add a whole new vibe to your reports.

The idea sparked from the previous week’s CodePen Challenge: “Halloween Masks.” Say no more… challenge accepted!

For the dataset, I’ve chosen “Frightgeist 2017: Costumes by State”, which displays the most popular Halloween costumes in each state in 2017. So, now the dataset even has a 'masks' topic.

As a tech stack, I will use Flexmonster Pivot. This modern web library enables interactive reports and creative visualization of insights (which is precisely what I need for this project).

Step 1: Preprocessing the Dataset

At first, I wanted to make the dataset more catchy, so I added to each type of costume emoji, and it instantly gave the data a playful, seasonal touch:

As the next part of this step, I created the getData() function, where I defined specific types for each field. So, we’ll see Halloween costumes for every state and how they rank in popularity:

function getData() {
    return [
        {
            State: {
                caption: "State",
                type: "string"
            },
            "#1": {
                caption: "#1",
                type: "string"
            },
            "#2": {
                caption: "#2",
                type: "string"
            },
    …
        },
        [
            "Alaska",
            "Ninja 🥷",
            "Monster 👹",
            "Wonder Woman 🦸‍♀️",
            "Clown 🤡",
            "Rabbit 🐰"
        ],

Step 2: Setting Up the Project

Here I use Flexmonster to visualize all the raw data and then group it, so we can easily explore it and get valuable insights.

So, I created an HTML file and added Flexmonster to the section:

"stylesheet" type="text/css" href="https://cdn.flexmonster.com/theme/dark/flexmonster.min.css" />
<script src="https://cdn.flexmonster.com/flexmonster.js">script>

After it, I added a title and a container for the pivot table inside the section:

Halloween costumes by state 👻
<div id="pivot-container">div>

Step 3: Setting Up the Pivot Table

So now it’s time for Flexmonster configurations! To render our whole dataset, all you need to do is create Flexmonster instance, set the needed configs, and mention the needed rows and columns in the slice:

new Flexmonster({
        container: "#pivot-container",
        componentFolder: "https://cdn.flexmonster.com/",
        width: "100%",
        height: 600,
        report: {
            dataSource: {
                data: getData()
            },
            slice: {
                rows: [
                    { uniqueName: "State" }
                ],
                columns: [
                    { uniqueName: "#1" },
                    { uniqueName: "#2" },
                    { uniqueName: "#3" },
                    { uniqueName: "#4" },
                    { uniqueName: "#5" }
                ]
            },
            options: {
                grid: {
                    showTotals: "off"
                },
                chart: {
                    type: "bar"
                }
            }
        }
    });

Step 4: Styling

Now it’s time for real magic! In this step, we will apply a CSS mask and spotlight effect, which adds an authentic Halloween atmosphere to our demo. However, before that, I performed some basic styling, such as setting a dark background, using a new font, and cell coloring, among other tasks.

@import url("https://fonts.googleapis.com/css2?family=Original+Surfer&display=swap");

body {
    height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    background: #100d08;
}

h1,
#pivot-container [class^="fm"] {
    font-family: "Original Surfer", sans-serif !important;
}

h1 {
    color: #fff;
}

#fm-pivot-view .fm-grid-view .fm-data-sheet div.fm-cell.green {
    background-color: #c4d6b0 !important;
    color: #000 !important;
}

#fm-pivot-view .fm-grid-view div.fm-cell.orange {
    background-color: #ffc15e !important;
    color: #000 !important;
}

But to make different colors for cells depending on row index, I needed to complete my JavaScript code a bit by adding customizeCellFunction():

function customizeCellFunction(cell, data) {
    if (data.type == "value") {
        if (data.rowIndex % 2 == 0) {
            cell.addClass("orange");
        } else {
            cell.addClass("green");
        }
    }
}

Step 4.1: CSS-Masks effect

Since this CodePen Challenge is about masks, I decided to create a mask effect with a radial gradient for the pivot container. It can be easily done by adding this code snippet:

.fm-ui-container#fm-pivot-view {
    -webkit-mask-image: radial-gradient(circle, white 70%, transparent 100%);
    mask-image: radial-gradient(circle, white 70%, transparent 100%);
}

Step 4.2: Spotlight

Let’s add some drama to our pivot grid! The spotlight effect creates a stage-like feel, highlighting one area while cloaking the rest in shadow. Perfect for Halloween, and easy to build with CSS.

This effect darkens the entire screen except for a circular area that follows the mouse, and all you need to do to achieve it is make minor adjustments in the CSS part:

.spotlight {
    z-index: 1;
    position: fixed;
    inset: 0;
    background-image: radial-gradient(
        circle at var(--clientX, 50%) var(--clientY, 50%),
        transparent 6em,
        black 8em
    );
}

.spotlight.off {
    opacity: 0;
    z-index: 0;
}

Next, I wanted users to control the effect. A quick toggle button does the trick:

const spotlight = document.querySelector(".spotlight");
const toggleBtn = document.querySelector("#toggle-spotlight");
let spotlightEnabled = false;

toggleBtn.addEventListener("click", () => {
    spotlightEnabled = !spotlightEnabled;
    spotlight.classList.toggle("off", !spotlightEnabled);
    toggleBtn.textContent = spotlightEnabled
        ? "💡 Turn off spotlight"
        : "🌑 Turn on spotlight";
});

document.body.addEventListener("mousemove", (e) => {
    document.body.style.setProperty("--clientX", e.clientX + "px");
    document.body.style.setProperty("--clientY", e.clientY + "px");
});

Finally, added some CSS styling for the button:

#toggle-spotlight {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #ff7518;
    color: #000;
    font-family: "Original Surfer", sans-serif;
    font-size: 1rem;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
    box-shadow: 0 0 10px #ff7518aa;
    z-index: 400;
}

#toggle-spotlight:hover {
    background: #ffa34a;
}

And don’t forget about

Actually, I came up with this idea by reading an article on FrontendMasters. If you want to explore even more advanced spotlight effects, I highly recommend reading the “CSS Spotlight Effect” article.

That's all there is to it! We’ve successfully blended data visualization with a bit of CSS magic.

You can explore the final, fully functional demo and all its code here:

https://codepen.io/flexmonster/pen/raxdMeX

And since we were looking at the data: are you still curious about the most popular Halloween costume across different states? In 2017 it was Wonder Woman, taking first place in a whopping 24 states!

Moreover, in Delaware, the first place went to the “IT” costume. Interestingly, it’s hard to tell, does it refer to Pennywise from Stephen King’s novel or to a programmer?

I’d be happy to hear your thoughts on this demo, any ideas for improvements, or suggestions for further articles.

Data Viz Projects

Building a Halloween Dashboard with Spotlight Effect, CSS Masks, and Flexmonster

Halloween costumes by state 👻