# 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.

{% embed url="<https://youtu.be/iqDiHtpAc88>" %}
A quick demo
{% endembed %}

### 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` (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`
   * `background-clip: text`
4. **Background (**[Editing backgrounds](/editing/visual-editor/editing-backgrounds.md))
   * `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. **Text shadow**
   * `text-shadow`
9. **Filters**
   * `filter`
     * `blur()`
     * `contrast()`
     * `brightness()`
     * `saturate()`
     * `invert()`
     * `grayscale()`
     * `sepia()`
10. **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 unit conversion

CSS Pro automatically converts units for you. Check [Auto unit conversion](/editing/visual-editor/auto-unit-conversion.md).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.csspro.com/editing/visual-editor.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.