How to Handle Custom CSS in Qlik Sense (Now and Going Forward)

[Ouadie]

Custom CSS has been a popular workaround in Qlik Sense for years, helping developers tweak layouts, hide buttons, and get around styling limitations. But things are shifting. With the Multi-KPI object being deprecated and native styling options getting stronger with every release, it’s a good time to rethink how we approach custom styling in Qlik Sense moving forward.

In this post, we’ll break down:

• Why custom CSS is used in Qlik Sense
• What’s changing (and why Multi-KPI is being deprecated)
• Best practices for styling moving forward
• Alternatives for injecting CSS when needed
• What you can (and should) do now to future-proof your apps

Let’s dive in!

Why is custom CSS used in Qlik Sense?

In the past, Qlik’s built-in styling options were limited. That led to many developers using CSS to:

• Hide toolbars, buttons, and headers
• Apply custom fonts or background gradients
• Create grouped layouts or dashboards with unique branding

Most of this was made possible by either creating custom themes, building extensions, or using the Multi-KPI object as a helper to inject CSS code. But as powerful as these techniques were, they also came with downsides, like breakage after updates or difficulty governing app behavior at scale.

So, What’s Changing?

The biggest shift is the deprecation of the Multi-KPI object, which has served as a popular CSS injection tool. Here's what you need to know:

EOL of the Multi-KPI object is May 2026:

• Existing dashboards will still work for now, but migration is highly encouraged.
• The object is deprecated due to governance challenges and unintended side effects from injected CSS.

If you’ve been using the Multi-KPI as a styling workaround, it’s time to plan for alternatives.

Native Styling Has Come a Long Way

Before reaching for CSS, it's worth exploring what Qlik now offers natively. Many of the styling tweaks that once required CSS are now fully supported in the product UI.

Here’s a quick look at recent additions:

	Native styling available now or coming in the next update
Straight Table	Background images, word wrap, mini charts, zebra striping, null styling, header toggle
Pivot Table	Indentation mode, expand/collapse, RTL support, cyclic dimensions
Text Object	Bullet lists, hover toggle, border control, support for up to 100 measures
Line Chart	Point and line annotations
Scatter Plot	Reference lines with slope, customizable outline color and width
Layout Container	Object resizing and custom tooltips
Navigation Menu	Sheet title expressions, left/right panel toggle, divider control

And this list keeps growing. If you're building new apps or redesigning old ones, these built-in features will cover a huge percentage of use cases.

Many deprecated CSS tricks are now native. Check out the full Obsolete CSS Modifications  post for examples and native replacements.

What About Themes?

Themes are not going anywhere. In fact, they remain the most robust and supported way to apply consistent styling across your app portfolio.

With custom themes, you can:

• Define global font families, sizes, and colors
• Style specific object types like bar charts, pie charts, list boxes, and even treemaps
• Customize titles, footers, legends, and more via the JSON schema
• Apply branding at scale without touching each sheet manually

You can still include CSS files in themes, but remember:

• Inline styles used by Qlik objects may require the use of "!important" to override.
• Themes are not ideal for object-ID-specific or user-interactive CSS injection.

If you're new to themes, Qlik.dev has a great guide to get started, or checkout my previous blog post for some tips and tricks.

Still Need Custom CSS? Here’s What You Can Do

If your use case goes beyond what native styling or themes can handle—like hiding a specific button, or styling based on object IDs—you still have a few options:

• Extensions (with scoped CSS)
  Prefix styles with .qv-object-[extension-name] to isolate your rules.
  Load styles using RequireJS or inject via <style> in JS.?
  
  
• Mashups
  Full control over styling via your own HTML + CSS + JavaScript.
  Ideal for web apps embedding Qlik charts via qlik-embed

What's Missing

A lot of Qlik users have voiced the same thing: "we still need an officially supported way to inject CSS at the sheet or app level"

Some have suggested:

• A new “Advanced Styling” section in sheet properties.
• A standalone helper object just for advanced styling (like Multi-KPI but cleaner).
• Ability to define per-object-type styling rules in themes (e.g. “all straight tables”).

Qlik has acknowledged this feedback and hinted that future solutions are being considered.

What You Should Do Today

• Use native styling wherever possible—it's safer, easier to maintain, and now way more powerful
• Migrate away from Multi-KPI if you’ve been using it to inject CSS
• Explore themes for app-wide branding and consistent object styling
• Use extensions or mashups for truly custom experiences
• Follow community updates for new announcements around styling capabilities

That’s a wrap on this post. With more native styling features on the way, I’ll be keeping an eye out and will be likely sharing a follow-up as things evolve. If you're in the middle of refactoring or exploring new approaches, stay tuned, there’s more to come.

[Mark_Miron]

Gotta say, i am not a fan of this change. Removing flexibility for the user base is not a good look and saying that native styling "has come a long way" as justification rings hollow for those of us who struggle with the design side of Qlik Sense.

[igoralcantara]

Thanks for the update. Got to test it when I have a chance.

[Patric_Nordstrom]

@Mark_Miron it's still possible to inject CSS through a custom theme. As the internal CSS can change at any time, it's challenging for most users to keep track and maintain mods over time.

We're keen to know what styling you are missing and what you are using CSS for today? 

[TcnCunha_M]

Hello  @Patric_Nordstrom  — not all CSS used in MultiKPI works when applied through Themes.

For example, I have some CSS that hides the edit button for business users (since it needs a partial reload and they don’t have access to the code) and we use this aprtial load to get insights from the data using Qlik sense . But when I try to add that same CSS in a theme, it doesn’t work — probably due to some limitations with how CSS works in themes. 

[Achim_Gnadt_Leitart]

If you're looking for an extension that allows for Custom CSS injection, I would recommend Visualize from leitart. It's free to use.

You can find the description here: Overview | Leitart Docs

And the free download here: LeitArt Download

[shep_work]

For my 2 cents, the last month I have been struggling a lot with CSS.  I am not in control of our qlik sense server and hence cannot control versions etc.  We are now on Qlik Sense November 2024 Patch 8 (qliksenseserver: 14.212.15) and it has effectively broken our css that is being controlled via VizLib Sheet Menu Plus version 1.14.3.  I had code that has been running fine without any issues since 2022.  Now I can't even hide the borders without also having other things like Qlik native maps from Wm5Loader.js either refuse to load or get skipped altogether.  If this is the future of Qlik I am going to have a hard time selling it to my groups as a 'stable' solution. We want to hide the menu at the top and provide our own menu, we want a left side navigation with various filters, drop downs, calendar items, and we want a clean look that has a white background and no borders on any objects.  The VizLibSheet Menu 'side menu' and 'top menu' provided all these things nicely and with the css below it was exactly what we needed.  Now I can't get 2 people to see the maps consistently even with clearing cache every single time.

Original CSS that used to work but has been broken:

='.qvt-sheet {background: #fff !important; border-style: none none none solid; border-width: 1px; border-color: #6F7171;} .qv-card.printing-live-card .printing-live-content .qv-object-wrapper .qv-object, .qv-client.qv-card #qv-stage-container #grid .qv-object-wrapper .qv-object, .qv-client.qv-card .qv-story-sheet .sheet-container #grid .qv-object-wrapper .qv-object {
    border: none;
    border-radius: 4px;
    box-sizing: border-box;
}'

'New' CSS that only works some of the time

='.qvt-sheet {background: #fff !important; border-style: none none none none !important; border-width: 1px; border-color: #6F7171;} .qv-card.printing-live-card .printing-live-content .qv-client.qv-card #grid .qv-object-wrapper{ border: none !important;} .qv-object {
    border: none !important;
    border-radius: 4px;
    box-sizing: border-box;
}'