Add custom CSS and classes to a layer

Custom CSS adds declarations the style panel doesn't offer, such as a wavy underline or a clipped shape, to one layer. Custom classes give the same declarations to every layer that names them. Both show on the canvas and on your published site alike. Custom CSS is reaching workspaces in stages, so you may not see it yet.

Add declarations to a layer

1. Select one layer.
2. In the properties panel, open Custom CSS. It's one of the advanced sections.
3. Type a property, for example text-shadow. The field suggests the ones you can use.
4. Type its value, for example 0 2px 0 rgb(124 58 237 / 0.35), and press Enter.
5. Add declaration adds another row. The × at the end of a row removes it.

The declarations apply at the breakpoint you're editing, as any style does, and come after the layer's other styles, so they win where both set the same thing.

What you can write

• Visual properties only: shadows, outlines, clipping, text decoration, filters, cursors and the like. Layout, position and size stay with the style panel's own controls.
• A value can't contain ;, {, }, <, \ or !important.
• An image is one of your site's own, written url(asset:…).

A row that breaks a rule shows why under it, and nothing is saved until every row is right. Your site's server also reads each declaration as a browser would; a value it can't read isn't saved.

Custom classes

1. In Custom CSS, under Classes, type one or more names separated by spaces, for example card-raised, and press Enter. A name starts with a letter and uses letters, digits, - and _.
2. In the site menu, open Custom classes…, choose Add class, give it the same name and its declarations, and choose Save.

Every layer that names the class gets its declarations. A layer's own style wins over its classes. Custom classes need permission to edit code.