CSS Properties

CSS Properties

Use Monster's custom CSS properties for fast and forward-thinking design.

The Monster form uses many custom CSS properties (variables) for real-time customizations. These provide easy access to commonly used values like our theme colors or primary font stacks when working in your browser's inspector, in a code sandbox, or in general prototyping.

To avoid conflicts with third-party CSS, all custom properties are prefixed with monster-.

Here are the variables we include (note that the :root is required) that can be accessed anywhere Monster Form's CSS is loaded.

:root {
    --monster-border-color: #ff7;


With the following script, you can see the list of all the CSS properties that are available in the Monster UI Framework.

ag  -o --nofilename 'var\(\-\-monster[^)]*\)' | grep var | cut -d"," -f1 | cut -d")" -f1 | cut -d" " -f1 | cut -d"(" -f2- | sort | uniq 

Actually, the following CSS properties are in use (incomplete list):