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

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
  • Copy CSS and HTML with one click
  • Copy the CSS and HTML of all element's children
  • Edit the CSS in real-time
  • Identify which font is being used
  • Edit the element's text
  • Check element dimensions
  • Check HTML attributes
  • Copy CSS animations @keyframes
  • Copy CSS selector (classes, ids, etc)
  • Generate unique CSS selectors
  • Scan all pseudo-classes (:hover, :focus, etc)
  • Scan all pseudo-elements (:before, :after, etc)
  • Re-target element with DOM tree navigation
  • Save element as a file
  • Export element to Codepen
  • Scan inherited styles
  • Guidelines for checking alignments
  • Media queries support
  • Remove elements
  • It works offline too
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); }

A single click to copy

With just a single click, copy the designs of your favorite websites, frameworks or themes. Only click, and it's yours. 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 1 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
  • Changes in real-time
  • Quickly experiment design tweaks
  • Edit everything, including pseudo-classes, pseudo-elements, and @keyframes!

Save all changes

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 new code
  • Copy changes only (minimize conflicts with your themes or current styles)
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

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