Visual Editor

The Visual Editor is the biggest feature of CSS Pro.
With it, you can quickly and easily change things like spacing, colors, sizes, borders, text, etc... by just clicking, and get a generated CSS code for it.
It's like having WordPress-like theme builders, but for the whole internet.
Tips:
To quickly increase and decrease values, click (and hold) then drag to the left or right side of the screen.
You can also change values by using the keyboard arrow keys (▲ up and ▼ down), which will increase or decrease by 1.
Holding the Shift key will increase or decrease values by 10.
Holding the Alt key will increase or decrease values by 0.1.
​
Available Sections and CSS Properties
1.General
width
height
transform: rotate
border-radius
2.Spacing
margin-top
margin-right
margin-bottom
margin-left
padding-top
padding-right
padding-bottom
padding-left
3.Typography
font-family
font-weight
font-size
color
line-height
text-align
letter-spacing
text-decoration-line
text-decoration-style
4.Background
background-color
background-image
background-repeat
background-size
background-position
5.Display
display
opacity
flex-direction
flex-wrap
justify-content
align-items
6.Border
border-color
border-width
border-style
7.Positioning
position
top
left
right
bottom
8.Box shadow
box-shadow
​
With the exception of the General section, every section is expandable and collapsible.
To expand or collapse a section, click on its name or on the arrow icon on its right side.
When you pin an element, the Visual Editor will automatically collapse sections with unused CSS properties.
​
Auto measurement units conversion
With a click, you can convert absolute (px) to relative measurement units (%, em, etc...) and vice-versa. No more calculators.
It works with any property with a unit on Visual Editor.

Last modified 7mo ago