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. Get it now Try it free See how it works (2:28)

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 CSS and HTML with one click Copy the CSS of all element's children

Copy the CSS of all element's children Edit the CSS in real-time

Edit the CSS in real-time Identify which font is being used

Identify which font is being used Check element dimensions

Check element dimensions Check HTML attributes

Check HTML attributes Copy CSS animations @keyframes

Copy CSS animations @keyframes Copy CSS selector (classes, ids, etc)

Copy CSS selector (classes, ids, etc) Generate unique CSS selectors

Generate unique CSS selectors Pseudo-classes (:hover, :focus, etc)

Pseudo-classes (:hover, :focus, etc) Pseudo-elements (:before, :after, etc)

Pseudo-elements (:before, :after, etc) Re-target element with DOM tree navigation

Re-target element with DOM tree navigation Extract element to Codepen

Extract element to Codepen Computes inherited styles

Computes inherited styles Guidelines for checking alignment

Guidelines for checking alignment Media queries support

Media queries support It works offline too Notification message A Card Title dribbble.com









Los Angeles, USA 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. Changes in real-time

Changes in real-time Quickly experiment design tweaks

Quickly experiment design tweaks Edit everything, including pseudo-classes, pseudo-elements, and @keyframes! Save all changes Never lose your changes anymore. See all the improvements you've made, and copy them all easily. Export as a file

Export as a file Reset all changes

Reset all changes Copy all new code h5.card-title CHANGED Copy new code @@ -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) ;

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.

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

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. Monthly $20/month Billed every month License for 3 activations All updates within 1 month Chrome, Firefox, Safari Scan unlimited websites Buy CSS Scan Pro

Buy CSS Scan Pro 83% of Pros choose Yearly Yearly $10/month Billed $120 yearly License for 3 activations All updates within 1 year Chrome, Firefox, Safari Scan unlimited websites Priority Support Save 50% Buy CSS Scan Pro

Buy CSS Scan Pro Need more than 10 licenses? Contact Us