The definitive browser extension to work with web design.

CSS Scan Pro makes it radically easy to get the looks of your favorite websites. Hover over any element, and get its CSS, font, dimensions, animations and selector, instantly.

PRO badge 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. It works with any theme as well.

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
  • It works offline too
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 or favorite themes 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

Not the right element you're looking for? Precisely re-target any DOM element using your keyboard's arrow keys to navigate through the HTML tree. You're in absolute control.

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

Easily customize any element's CSS and see the changes in real-time and a seamless experience.

  • 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

Fell in love with a color you saw somewhere? Use Pro's color eyedropper - it works even if it's an image. Point and click to get the color you're seeing.

Website palette

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

DEMO badge

Measure anything, instantly.

Save time with the Ruler feature, measure elements and the distance between everything you see on your browser, in real-time, or, drag and drop to measure freely.

Get it now

Goodbye to "Inspect Element"

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