Styling & Design
Custom CSS
The escape hatch for advanced styling — add any CSS property an element's controls don't expose, plus where site-wide custom code lives.
Last updated 2026-06-29
The styling sectors cover almost everything you'll ever need. But CSS — the language behind web styling — has hundreds of properties, and occasionally you'll want one the controls don't show. The Custom CSS box is that escape hatch. It's an advanced tool, so don't worry if you never touch it.
The per-element Custom CSS box
In Pro mode, scroll to the bottom of the Customize tab to find Custom CSS. It lets you add any CSS property to the selected element.
- Type a property name (an autocomplete list suggests common ones).
- Type its value.
- Add it. The property appears as a chip you can edit or remove later.
For example, to make an element show a pointer cursor on hover:
property: cursor
value: pointer
Useful properties you might add
| Property | What it does |
|---|---|
cursor | Change the mouse cursor (e.g. pointer). |
backdrop-filter | Blur whatever is behind a semi-transparent element (frosted glass). |
clip-path | Crop an element into a shape (circle, polygon). |
mix-blend-mode | Blend an element's colors with what's behind it. |
object-position | Choose which part of an image stays in view when cropped. |
pointer-events | Make an element ignore clicks (none). |
These additions apply to the selected element, just like the regular style controls.
Site-wide custom code
The Custom CSS box styles one element. To add code that affects your whole site, open Project Settings → Advanced (the ⚙ gear at the bottom of the left panel). There you can add:
- Custom CSS that applies across every page,
- Custom
<head>code (for meta tags and the like), - Custom JavaScript.
See Project settings for the details.
A note on JavaScript. For your visitors' security, custom JavaScript may be limited or disabled depending on how your Webpress is configured. Custom CSS is always safe; if you need scripted behavior and it isn't working, that restriction is why.
When to use custom CSS — and when not to
- Do use it for a one-off property the controls don't expose.
- Prefer the visual controls and the Brand Kit for anything they cover — they're easier to maintain and stay responsive automatically.
- If you find yourself writing a lot of custom CSS, there may be a simpler visual way; the rest of the Styling & Design guides probably cover it.
Where to go next
- Styling overview — back to the visual controls.
- Project settings — site-wide code and configuration.