Visual Editor (Design tab)

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.

A quick demo

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.

Editing backgrounds

CSS Pro has the most complete background editor for the web, and you'll be amazed at what you can create.

How to use it:

Select an element, then go to the tab "💧 Design", then scroll down to the section "Background" and either choose one of our 300+ high-quality background presets or start by clicking "Add a background layer".

Click on the layer preview (a circle) where you can choose the layer type (solid, linear-gradient, radial-gradient, conic-gradient, image, pattern, and noise).

What you see is what you get. Drag and adjust color stops directly over the element and easily create stunning gradients.

Hide, re-order, duplicate, blend, or delete layers with ease. It also comes with 80+ charming, pure CSS background patterns.

CSS Pro's background editor

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 (access to all 2,000+ Google Fonts in an instant)

   • 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 unit conversion

Stop guessing numbers. Save time by converting px to %, em, etc., and vice-versa with a single click.

It works with any property with a unit on Visual Editor.