# Add advanced CSS

The **Advanced CSS** panel adds to a block a CSS property that the editor does not offer, for one state and one screen. This article explains how to write a declaration, read the panel’s alerts and share the declaration with a registered style.

## Before you start

- The **Advanced CSS** panel is for properties that no editor setting offers. When a setting exists, prefer it: it keeps the link with your design system, the states and the screens.
- The panel is the last one in the **Styles** tab. It appears on the blocks that can carry a [registered style](https://lovelyrender.com/documentation/save-block-style/).
- It requires the **Administrator** role. Other roles do not see it: see the section Edit a page that carries advanced CSS.
- Like any change, your declarations stay on Staging until the next publication of the site.

## Add a declaration

The following example balances the lines of a heading that leaves a single word on its last line.

1. Select the heading, open the **Styles** tab, then the **Advanced CSS** panel.
2. Choose the state and the screen at the top of the tab. For all screens, keep **Overall**.
3. In the **Add a declaration** field, type `text-wrap`, then choose the property in the list. A row appears.
4. In the **Value** field of the row, enter `balance`. The heading is spread over lines of similar length.

![The Advanced CSS panel of a heading: the note reminding you to prefer an editor setting, the text-wrap declaration with the value balance, its link to the documentation and its trash button, the Add a declaration field and the Design variables link.](https://static.lovelyrender.com/uploads/2026/10/991-doc-pages2-css.png)

Each row carries a link to the documentation of the property on MDN and a **Remove** button. The declaration applies in the editor as you type.

The **Add a declaration** field offers only the available properties. A row carries only one property: a block of CSS cannot be pasted. The **Value** field, however, accepts a paste, for example a long gradient copied from another tool.

## Write a value

A value accepts calculation functions (`calc()`, `min()`, `max()`, `clamp()`), color functions (`rgb()`, `hsl()`, `oklch()`, `color-mix()`, `light-dark()`), gradients, transforms, filters, `clip-path` shapes, as well as `repeat()` and `minmax()` for grids. A value is at most 2,048 characters long.

### Use a design system variable

1. Click in the **Value** field of a row, where the variable should go.
2. Expand **Design variables**.
3. Click the variable. It is inserted at the cursor.

The list shows every color, spacing, text size, shadow, radius and font of your site. A spacing, a size or a radius is shown by its value, a color or a shadow by its name. A declaration written with a variable follows your design system: if your main color changes, the declaration changes with it.

## Understand the alerts of the Value field

As you type, the **Value** field can show two alerts.

| Border | Meaning | Line saved |
| --- | --- | --- |
| Red, with a sentence under the line | The value contains something the panel refuses. The sentence names it, for example **vmm is not a unit that advanced CSS accepts.**, followed by **Lovely Render will not write this line into the page.** | No. It does not apply in the editor either. Correct the text, it stays in the field. |
| Amber | **Your browser does not understand this value for this property. It is saved as is. Check the spelling.** | Yes. A more recent browser might understand it. |

An amber border most often comes from a typo, for example a `calc(100%-10px)` without spaces around the minus.

## Know the limits of advanced CSS

The panel refuses as you type what it cannot write into the page. The server rechecks each declaration before applying it.

| Refused | Reason |
| --- | --- |
| A selector, a nested rule, an `@media` | Lovely Render writes the selector from the chosen state and screen. |
| The characters `<` `>` `;` `{` `}` `@` `\` `!` and comments, so `!important` | Your declaration already takes precedence over the block’s styles. |
| `url()` and any function that loads a resource | Images, fonts and files go through their own tools. Gradients are still accepted. |
| A variable missing from your design system, or `var()` with a fallback value | The variables of your design system are always declared. |
| `content`, animation and transition properties, prefixed properties such as `-webkit-…` | They are not in the list. Animations and transitions have their own panels. |

**Note:** On an animated block, the animation keeps control of `transform`, `opacity`, `filter` and `clip-path` as long as it exists. For a visitor who asks for fewer animations, these properties do not apply.

## Read the inherited declarations

Under your rows, the **Already applied here** list shows the declarations that act on this block, at this state and this screen, but come from elsewhere: from a registered style of the block, or from **Overall** when you are on a specific screen.

1. Spot the declaration in **Already applied here**.
2. Click **Override**. It moves into your rows.
3. Change its value. Your version applies to this block only.

Removing your version brings back the original declaration. To remove a declaration from a registered style, open the style’s **Update** form and tick the row to remove.

## Share a declaration between several blocks

|  | On a block | In a registered style |
| --- | --- | --- |
| Scope | This block, on this page. | All the blocks that carry the style. |
| Purpose | A one-off adjustment. | A rule to reuse. |
| Action | Write the row in the panel. | Write the row, then create or update the style with the **Advanced CSS** family ticked. |

Once in the style, the declaration leaves your rows and moves into **Already applied here**. Two styles that declare different properties add up on a block. If they declare the same one, the last in the list wins.

Your declarations are written in plain CSS, in the site’s stylesheet for a style, at the top of the page for a block. They add no script and no request. They go property by property with your content in the site export.

**Note:** A property can leave the list if it proves dangerous or if a setting replaces it. It then stops being written into the page.

## Edit a page that carries advanced CSS

A member who is not an administrator does not see the **Advanced CSS** panel, but can edit the pages that carry it. A block keeps its declarations when this member moves it, duplicates it or changes its text. Translating a page, copying it, starting from the template of a content type or pasting a block copied to another page of the site also carries its advanced CSS along.

A block copied from another site can carry advanced CSS that your site does not have. For a member who is not an administrator, saving is then refused with the message **Only a site administrator can add advanced CSS, and a block in this content carries some that the site does not have, often a block pasted from another site. Remove this block, or ask an administrator to save.** Remove the pasted block, or ask an administrator to save the page. An AI connected to the site follows the same rule as the member who connected it.

## See also

- [Save a block’s style](https://lovelyrender.com/documentation/save-block-style/)
- [Set size, borders and effects](https://lovelyrender.com/documentation/size-borders-effects/)
- [Set your colors, fonts and scales](https://lovelyrender.com/documentation/set-colors-fonts-scales/)
- [Invite a member and choose their role](https://lovelyrender.com/documentation/invite-member/)