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 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 35px 120px #000;

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: 200px;
height: 200px;
opacity: 0.9;
background-image: linear-gradient( -180deg, rgb(236,154,62) 0%, rgb(255,236,214) 100%);
box-shadow: 0px 37px 72px 0px rgba(0, 0, 0, 0.68);

Not all CSS properties are supported – 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-size-adjust'

'font-stretch'

'font-style'

'font-variant'

'font-weight'

Padding properties:

'padding'

'padding-bottom'

'padding-left'

'padding-right'

'padding-top'

Text properties:

'direction'

'tab-size'

'text-align'

'text-align-last'

'text-decoration'

'text-decoration-color'

'text-decoration-line'

'text-decoration-style'

'text-indent'

'text-justify'

'text-overflow'

'text-shadow'

'text-transform'

'line-height'

'vertical-align'

'letter-spacing'

'word-spacing'

'white-space'

'word-break'

'word-wrap'

Other properties:

'box-shadow'

'filter'