A re-imagined Devtools for 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, colors, assets, animations, font, and dimensions, instantly. Copy, export, or refine it with an intuitive CSS editor, without writing code.

PRO badge Get it now Try it free See how it works (2:28)
Demo

Built to work on any website

CSS Scan Pro runs on the browser as an extension. It works on all kinds of websites: WordPress, Shopify, React, Wix, all themes, anything. It works even if the website is not yours. No code change is required, and it works offline.

Powerful, accurate and lightspeed CSS inspection

We've spent two years testing and building the smartest and most complete CSS inspection tool so you can get everything you need, effortlessly. And it's always getting better.

Try it yourself on this page
  • Inspect CSS on the fly
  • Uncluttered, optimized, and clean CSS: a code that is easy to understand
  • Colors previews and syntax highlighting
  • Identify which font is being used
  • Check element dimensions
  • Check HTML attributes
  • Copy all pseudo-classes (:hover, :focus, etc)
  • Copy all pseudo-elements (:before, :after, etc)
  • Copy the CSS and HTML of the element and all its children
  • Copy CSS animations @keyframes
  • Copy CSS selector (classes, ids, and unique selectors)
  • Export element to Codepen or save it as a file
  • Check alignments in real-time with guidelines
  • Re-target selected element with DOM tree navigation
  • Media queries support
Notification message
Example image

A Card Title

dribbble.com


Los Angeles, USA

Sunday, 11:00 pm


22°

Humidity 66%

See animations' code easily

Understand how every CSS animation works by visualizing the CSS of the keyframes without having to dig 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); }

Click, and it's yours

Copy the designs of your favorite websites, frameworks, or themes. It extracts the HTML and CSS of an element and all its children in seconds. Build your page to perfection.

div .sibling
div .parent
↳ div .child

div

.parent

1424×701

Times 14px

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

You're 100% in control

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 can also open the extension from your Devtools to select an element.

Save nested assets

Easily download any image from a website without having to dig the code. CSS Scan Pro gathers all images for you by analyzing background images, img tags, svgs and even HTML attributes! Download all images from a website with a single click.

Hop on board the new and smart way to work with CSS

Live editing

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

The Visual Editor is like having WordPress-like theme builders, but for the whole internet. And it automatically generates first-class CSS code for you, ready-to-use.

  • Visual Editor: change and add styles interactively, without writing CSS code
  • Code Editor: with syntax highlighting and color pickers
  • Quickly experiment design tweaks in real-time
  • Edit everything, including pseudo-classes, pseudo-elements, and @keyframes!

Color pickers, with tints and shades

Pick your perfect colors with our color picker. It generates tints and shades of the selected color in real-time, making it easier to test darker or brighter colors. And it's super easy to change color formats.

Convert px to %, em, etc

Save time by converting absolute (px) to relative measurement units (%, em, etc) and vice-versa with a single click. No more calculators.

Test new texts quick and easy

Want to try a different copywriting? Click on any text you want to change, type, and watch it happen.

Remove elements

Try cleaner designs or simply get rid of ads. Easily remove any element from a page.

Every change is tracked

CSS Scan Pro keeps track of every change you make on the elements' CSS when using it. Never lose your changes anymore. See all the improvements you've made, and copy or export them all easily.

  • Export all changes as a file (to share it with your team)
  • Reset all changes
  • Copy all changes
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: #212529;
6
+ color: rgba(247, 0, 0, 1);

Copy and export elements from your favorite websites and themes

Extract the HTML and CSS of elements and all its children (as whole components).

You can share these web elements (as files or Codepen snippets) with your team or keep them on your desktop and start your folder of beautiful elements that you can use on your projects from today on.

  • Copy the CSS and HTML of elements and its children
  • Save elements as files
  • Export elements to Codepen

Devtools integration

Want to see the HTML at the same time? You can also open CSS Scan Pro inside your Devtools! Fits right into your workflow. This feature is only available on

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

Analyze the entire palette of colors from a website. In a second, find the color you like, and just click 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, click and drag to measure freely.

Get it now

We do a lot of quick prototyping on live apps and CSS Scan Pro really speeds up the entire workflow. It is significantly faster and more convenient than using built-in dev tools. Features such as the Ruler, Eyedropper, and Visual Editor really stand out for us, making playing with different designs so much easier.

A must-have tool for anyone doing CSS design work!

Globenet Logo

Alex
Developer at Globenet

I was impressed with all of the options this extension had. It replaced my full extension stack other than the necessities. Yes, this product is a little pricey, but for me, the average website costs $1,500+, so this was a no-brainer.

On top of that, the export to Codepen is genius! I mean, what CSS tool has a ruler, color palette, font inspector, history of changes, shortcut keys, and on top of all of this it works within Developer Tools...

Globenet Logo

Chris Seifert
Developer at portseif.io

I have been "blown away" about the usefulness of CSS Scan Pro in my workflow. It completely replaces 4 or 5 other tools, replaced the dev console in 95% of situations, aggregates page assets to one-click when needed, remembers CSS changes I make... it does it all.

If you develop sites or tweak CSS code then you absolutely need this tool. All of my team has it now and they use it daily!

Josen Ruiseco

Josen Ruiseco
President at ShoutCloud Studios

Take your work to the next level

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

Loading spinner Loading demo... Please wait