Blocks Containing CSS

Kadence now visually highlights blocks that contain custom CSS, making it easier than ever to identify styled elements at a glance. When you load a block that includes its own CSS, you’ll see a dotted border surrounding the block and a small red “CSS” badge or icon in the top corner. This helpful indicator is only visible in the block editor and serves as a visual reminder that the block has styles applied behind the scenes.

This feature is especially useful when working with blocks from the Kadence Design Library or when copying elements between pages. It allows you to quickly spot which blocks include extra styling — so you can manage, customize, or troubleshoot them more confidently.

Let’s Get Started

In this guide, we’ll walk you through what these indicators mean, how to interact with CSS-enabled blocks, and what to consider when editing or reusing them on your site.

What Happens If You Remove the CSS?

If you remove the custom CSS from a block, any special styling that was applied using that CSS will be lost. In most cases, the block will still function, but it may look quite different from how it was originally designed — especially if the CSS was controlling layout or visual details not available in the block’s settings panel.

How to find or edit the CSS?

Kadence makes it easy to view or edit the custom CSS applied to a block. If a block includes CSS, you’ll notice a dotted border around it and a red “CSS” badge in the top-right corner when editing the page or post. This visual cue lets you know there’s extra styling working behind the scenes.

To find the block go to the Kadence menu to the right of your page, then Advanced and scroll down to Custom CSS.

Kadence uses the CSS badge and dotted border to help you avoid accidentally stripping away those visual enhancements. If you do plan to remove the CSS, it’s a good idea to preview your page before and after, or make a duplicate of the block just in case you want to revert.

For more details how and where to add custom CSS, check out How To Add Custom CSS.

NOTE: If some of these options are unavailable, you most likely do not have the Kadence Pro installed.