The Custom CSS panel lets you go further into customization.

Since each layer is made from HTML, you can virtually use any CSS property to bring extra styles.

Use either a custom class or input CSS.

Custom class

Setting one or multiple classes to a layer, is to be used in combination with the Global CSS setting (in the template settings).

This allows to reuse a set of styles for multiple layers without having to write them individually.

1. Create a custom set of styles

In the template setting, go to the Global CSS panel and define a set of style like so (we are going to create a style composed of a combination of 10px blur and 50% sepia for our custom styles) :

.my-style{
    backdrop-filter: blur(10px);
    filter: sepia(0.5);
}

2. Use your custom styles throught layers

Once your style has been set, select a layer and in the Custom CSS panel add the class that corresponds to your set of styles.

In our example the class name is my-style

The styles corresponding to the my-style class get applied on the layer !

Any change made to the global styles will then automatically be repercuted to all the layers with this CSS class.

Custom CSS

Enter your custom CSS directly to apply styles to the selected layer only.

CSS needs to be properly written and each line must end with a semicolon (;)

In the below screen recording, all the pieces on the chess board have been attributed either the “piece” or “piece-black” class. We will then create custom global styles that will apply to all these layers at once.