Custom Styles with CSS3

With our new addition of Custom Styles, the bridge between designer and developer is getting smaller! Now you can use CSS3 code to directly shape how your elements look and behave.

When selecting elements you will see the Custom CSS section and the end of the Properties panel. Just type CSS code there or copy & paste it from a different source to see immediate results. In this example, with few clicks we have added a shadow to the box:

box-shadow: 0 10px 30px 0 rgba(0,0,0,0.2);

You can also directly affect all visual settings of an element at once – for that we have used a CSS3 code generator:

Here’s the code we’ve used in this example:

width: 180px;
height: 60px;
border-radius: 30px;
color: rgba(0,0,0,1);
background: #ffffff;
box-shadow: 0 10px 30px 0 rgba(0,0,0,0.2);

Not all CSS properties are supported but here is a complete list of those that you can use:

Background properties:

'background'

'background-attachment'

'background-clip'

'background-color'

'background-image'

'background-origin'

'background-position'

'background-repeat'

'background-size'

Border properties:

'border'

'border-bottom'

'border-bottom-color'

'border-bottom-left-radius'

'border-bottom-right-radius'

'border-bottom-style'

'border-bottom-width'

'border-color'

'border-image'

'border-image-outset'

'border-image-repeat'

'border-image-slice'

'border-image-source'

'border-image-width'

'border-left'

'border-left-color'

'border-left-style'

'border-left-width'

'border-radius'

'border-right'

'border-right-color'

'border-right-style'

'border-right-width'

'border-style'

'border-top'

'border-top-color'

'border-top-left-radius'

'border-top-right-radius'

'border-top-style'

'border-top-width'

'border-width'

Color properties:

'color'

'opacity'

Dimension properties:

'height'

'width'

Font properties:

'font-size'

'font-style'

'font-variant'

'font-weight'

Padding properties:

'padding'

'padding-bottom'

'padding-left'

'padding-right'

'padding-top'

Text properties:

'text-align'

'text-align-last'

'text-decoration'

'text-decoration-color'

'text-decoration-line'

'text-decoration-style'

'text-overflow: ellipsis'

'text-indent'

'text-justify'

'text-shadow'

'text-transform'

'line-height'

'vertical-align'

'letter-spacing'

'word-spacing'

Other properties:

'box-shadow'

'filter'