CSS Pro
  • Initial page
  • Quick Start
    • Installing it
      • On Google Chrome
      • On Firefox
      • On Safari
  • Inspecting
    • Choosing what happens when you click on an element
    • Inspecting invisible, overlapping, and parent elements
    • Comparing multiple elements at the same time (Pinning)
    • Measuring distances and checking alignments
    • Inspecting animations
    • Identifying fonts
  • Editing
    • Code Editor (Code tab)
      • Forcing a state or pseudo
    • Visual Editor (Design tab)
      • Editing media queries and pseudo states
      • Editing backgrounds
      • Auto unit conversion
    • HTML Editor (HTML tab)
    • Handling CSS changes
    • Editing texts
    • Removing elements
  • Copying
    • Copying CSS and HTML
    • Exporting elements
    • Downloading page assets (images)
    • Copying colors
  • License
    • Managing your license activations
    • Retrieving your license key (forgot)
  • Subscription
    • Switching from the monthly to the annual plan
    • Canceling your subscription
Powered by GitBook
On this page
  • Tips:
  • Available Sections and CSS Properties
  • Auto unit conversion

Was this helpful?

  1. Editing

Visual Editor (Design tab)

PreviousForcing a state or pseudoNextEditing media queries and pseudo states

Last updated 6 months ago

Was this helpful?

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 (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)

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

A quick demo