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 any kind of website you are working on: Wordpress, Shopify, React, Wix, Webflow, anything. It works with any theme as well.

Powerful, accurate 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 styles with one click
  • Edit the CSS in real-time
  • Identify which font is being used
  • Check element dimensions
  • Check HTML attributes
  • Copy CSS animations @keyframes
  • Copy CSS selector (classes, ids, etc)
  • Pseudo-classes (:hover, :focus, etc)
  • Pseudo-elements (:before, :after, etc)
  • Re-target element with DOM tree navigation
  • Computes inherited styles
  • Guidelines for checking alignment
  • Media queries support
  • It works offline too
Notification message
Example image

A Card Title

dribbble.com


Los Angeles, USA

Sunday, 11:00 pm


22°

Humidity 66%

Devtools integration

Fits right into your workflow. A reliable and clean CSS. This feature is only available on

Finally see animations' code easily

Understand how any 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 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.

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!

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
  • Quickly experiment design tweaks

Save all changes

Never lose your changes anymore. See all the improvements you've made, and copy them all easily.

  • 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

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, drag and drop to measure freely.

Get it now

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