The definitive browser extension to work with web design.

CSS Scan Pro makes it radically easy to get the looks of any website. Hover over any element, and copy its entire CSS with a single click.

Get it now Try it free See how it works (02:11)

Built to work on any website

CSS Scan Pro runs on the browser as an extension so it works on any kind of website you are working on: Wordpress, Shopify, React, Wix, Webflow, anything.

Smart, reliable and lightspeed CSS inspection

Expertly optimized and complete CSS delivered to you as fast as your mouse moves. The smartest and most complete browser extension for CSS inspection.

Try it free
  • Copy to clipboard
  • Rendered font family and size
  • Inherited styles
  • Pseudo-classes & pseudo-elements
  • Keyframes reading
  • Element dimensions
  • Guidelines for checking alignment
  • CSS selector
  • Media queries support
  • DOM tree navigation
  • CSS syntax highlighting
Notification message
Example image

A Card Title

dribbble.com


Los Angeles, USA

Sunday, 11:00 pm


22°

Humidity 66%

A single click to copy

Copy the styles of your favorite websites with a single click. You just click, and it's yours. Create your perfect page.

div .sibling
div .parent
↳ div .child

div

.parent

1424×701

Times 14px

color: #fff; font-size: 14px; text-align: right;

Sail through the DOM

You're in absolute control. Precisely target any DOM element using your keyboard's arrow keys to navigate through the HTML tree.

Finally see animations' code easily

Understand how every CSS animation works by visualizing the keyframes' CSS without needing to search through the source code.

Try it free

svg

.animated-heart

80×80

CerebriSans-Regular 80px

font-size: 80px; animation: pulse 700ms infinite;

@keyframes pulse

50% {   filter: brightness(1.2);   transform: scale(1.2); }

A new and smarter way to work with CSS

Live editing

Change any element's CSS and see the changes in real-time.

  • Changes in real-time
  • Quickly experiment design tweaks

Save all changes

Never lose your changes anymore. See all the modifications you did and easily copy all of them.

  • Export as a file
  • Reset all changes
  • Copy all new code
h5.card-title CHANGED
@@ -1,10 +1,6 @@
1
- font-size: 20px;
1
+ font-size: 24px;
2
2
  font-weight: 500;
3
3
line-height: 1.2;
4
4
  margin-bottom: .75rem;
5
5
  margin-top: 0;
6
+ color: red;
DEMO badge

#EA7E76

Color eyedropper

Quickly grab any color from any page in real-time with the eyedropper feature. Also works on images.

Website palette

Analyse the whole color palette used on a website's CSS. Find the color you need in a second and just click on it to get its syntax.

DEMO badge

Measure anything

With the Ruler feature, measure elements and the distance between everything you see on your browser.

Get it now

Use it once, love it forever

Available for Chrome, Firefox and Safari. For Safari, macOS 10.12 or later required.
The extension will only work while your subscription is valid and not expired.

Need more than 10 licenses? Contact Us