CSS Scan Pro
Search…
CSS Scan Pro
Initial page
Quick Start
Intalling it
Inspecting
Choosing what happens when you click on an element
Inspecting overlapping and parent elements
Comparing multiple elements at the same time (Pinning)
Measuring distances and checking alignments
Inspecting animations
Identifying fonts
Editing
Code Editor
Visual Editor
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
Visual Editor
The Visual Editor is the biggest feature of CSS Scan 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. 1.
    General (without title, always expanded)
    • width
    • height
    • transform: rotate
    • border-radius
  2. 2.
    Spacing
    • margin
    • padding
  3. 3.
    Typography
    • font-weight
    • font-size
    • color
    • line-height
    • text-align
    • letter-spacing
    • text-decoration-line
    • text-decoration-style
  4. 4.
    Background
    • background-color
    • background-image
    • background-repeat
    • background-size
    • background-position
  5. 5.
    Display
    • display
    • opacity
    • flex-direction
    • flex-wrap
    • justify-content
    • align-items
  6. 6.
    Border
    • border-color
    • border-width
    • border-style
  7. 7.
    Positioning
    • position
    • top
    • left
    • right
    • bottom
  8. 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.
​

Docking / Undocking

You can dock the Visual Editor to the right or left side of the screen, or you can also undock it into a floating window.
Editing - Previous
Code Editor
Next - Editing
Handling CSS changes
Last modified 5mo ago
Copy link
On this page
Tips:
Available Sections and CSS Properties
Auto measurement units conversion
Docking / Undocking