The fastest and easiest way to check, copy and edit CSS

CSS Scan 3.0

button

.btn .demo-btn .first-demo-btn

272x50

Arial 16px

background-color: #C2FBD7; border-radius: 50px; border-width: 0; box-shadow: rgba(25, 25, 25, 0.04) 0 0 1px 0, rgba(0, 0, 0, 0.1) 0 3px 4px 0; color: #008000; cursor: pointer; display: inline-block; font-family: Arial, sans-serif; font-size: 1em; height: 50px; padding: 0 25px; transition: all 200ms;

:hover

background-color: #AFE6C3; transform: scale(1.05);

Never open "Inspect Element" to check styles again

• The smartest browser extension for CSS inspection

  No unuseful, duplicated, overridden, or longhand CSS. CSS Scan runs hundreds of real-time advanced optimizations on the code to make it shorter, crystal clear, and prettier. Exactly the way you like it.

• Easy and lightspeed inspection

  Understand how everything works without wasting time hunting through infinite CSS rules on the browsers' Dev Tools.
  Get all the active styles on the fly and finish your work faster.
  Use shortcuts to work with it even quickier.

• Copy any element you want

  If you want to copy the CSS of this element right now, it's a pain. With CSS Scan, you just click, and it's yours. It copies all child elements, pseudo-classes and media queries. Create your perfect page.

Point, inspect, copy

• beachnearby.com

  

  1. Open the extension

  Go to any website and click on the extension icon on your browser’s toolbar to open it.

• 

  button

  .edit-btn

  92.1x40.8

  2. Hover over any element

  Hover any element and you’ll instantly get their CSS code. Inspect, debug, and understand the styling on the fly.

• Copied to clipboard!

  3. Click to copy

  Click to copy the code, or press the space bar to pin and edit. Copy thousands of elements with a single click.

Works everywhere. On every website.

Wordpress, Wix, Squarespace, Shopify, React, etc. CSS Scan runs on the browser as an extension so it works on any website, any theme and even works offline!
Choose your favorite: Chrome, Firefox, Safari, and Edge. Internet Explorer maybe never.

🎉  Media Queries, child elements and more! Check What's New in 3.0

Trusted by thousands

Get ready to join 14,000+ professional web developers from 116 countries using CSS Scan every day to deliver world-class websites.
on Gumroad
Watch WPTuts' in-depth review of CSS Scan (8:37)

• "This was an easy buy"

  Brad Frost · Creator of Atomic Design

• "It's a very useful Chrome/FF extension for me"

  Flavio Copes · flaviocopes.com

• "Very useful! I do not even count the time I had to inspect each element"

  Joulse · Senior Frontend Developer | OpenMakers | Shortcutly

• "After seeing the benefits of CSS Scan there's no way I could go back to Inspecting elements through dev tools. It's a game changer"

  Harry Dry · Marketing Examples

• "The best developer-productivity product of 2019. Should be a browser default!"

  Ahmad Awais · VSCode.pro | Google Dev Expert

• "CSS Scan by @gvrizzo: Hover over any element and copy its entire CSS rules with a single click 😍😍😍

  So useful for frontend work"

  Max Stoiber · Stellate | styled-components | react-boilerplate

• "This tool is insane. Instabuy."

  Joe Casabona · Author of HTML and CSS: Visual QuickStart Guide

• "I was told "but there are free funky extensions that tell you the CSS". Yeah. There are. And they don't evolve. CSS Scan does, and that is why I don't mind paying!"

  Anne Bovelett · Consultant for digital accessibility and inclusion

Buy it once and love it forever

• Chrome extension
• Firefox add-on
• Safari extension (macOS 10.12 or later required)
• Edge add-on