CSS Scan 4.0
CSS Scan 4.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;
background-color: #AFE6C3; transform: scale(1.05);
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.
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.
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.
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.1×40.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.
A Card Title
dribbble.com
Extract the HTML and CSS of elements and all its child elements (as whole components).
You can save these Codepen snippets on the cloud and start your collection of beautiful elements that you can use on your projects from today on.
To be able to export an element, first pin the CSS window by pressing the space bar.
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.
Yes! Press the space bar, click on the CSS code inside the window and try to change it. You'll see all the changes in real-time!
If the element you're hovering over is not the right one you want to copy, you can navigate through the DOM tree by pressing arrow keys up and down to inspect parents, siblings, and child elements.
Sure! It copies all CSS pseudo-classes and pseudo-elements such as: :hover, :before, :after, :focus, etc - all of them.
Yes, it copies all media queries in a single click, saving you tons of time, and preserving the elements' responsiveness across different devices.
Yes, CSS Scan is a browser extension, so it works on any website, regardless of the frameworks, plugins, libraries, themes, and anything you use. If it doesn't, please let us know, and we'll fix it for you.
Click on the button "Pause" or simply press the Shift key.
Yes, with CSS Scan, you can convert thousands of elements from regular CSS to Tailwind CSS with a single click. Use it to convert existing styles from any website to Tailwind CSS and save months of work.
This is optional. To turn it on: Options › Other copying preferences › Convert copied CSS to Tailwind CSS. Also choose: HTML Code › Copy it.
Yes! This is a life-time deal (LTD). You buy it once, and use it forever.
Each license is limited to 2 browsers simultaneously. You can manage your activations anytime at MyCssScan.com. Activations are per browser, not per device, since it's hard to uniquely identify devices via an extension (especially cross-browser). If you use multiple browsers and devices, it's better to buy more licenses. PS: Licenses purchased prior to March 25, 2025 can activate on three browsers simultaneously.
Yes! You can try the demo for free - but only on this website and on a desktop. Click here to try it
Sometimes you want to compare two elements and their respective CSS, that's very easy with CSS Scan: just press the space bar and the CSS window will be pinned on your screen. You can also drag it anywhere you want.
When you copy CSS from “Computed Styles”, aside from the declarations being longhand and bloated, it transforms all measurement units such as %, em, rem in pixels (px). This will break your website on mobile devices.
"Computed Styles" doesn't handle pseudo-classes, pseudo-elements, media queries, or keyframes, and it doesn't copy multiple elements at once.
CSS Scan, on the other hand, captures all these details, maintains the original units (%, em, etc.), and gives you everything you need effortlessly.
Get ready to join 20,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"
"It's a very useful Chrome/FF extension for me"
"Very useful! I do not even count the time I had to inspect each element"
"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"
"The best developer-productivity product of 2019. Should be a browser default!"
"CSS Scan by @gvrizzo: Hover over any element and copy its entire CSS rules with a single click 😍😍😍 So useful for frontend work"
"This tool is insane. Instabuy."
"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!"
Translations: Chinese (Amelia and Qianfei), Korean (정석원), Swedish (@Habbe), French (@Joulse_), German (@leoffard), Indonesian (@shinatakashi and @jetroidmakes), Vietnamese (@FancaSn1), Dutch (@Aidenbuis), Spanish (@inelnuno), Arabic (@alisumait), Russian (@sanches_free), Polish (@nerdontour), Hindi (@ashishgapat), Tamil (@anirudh24seven), Italian (@melilli_marco and @StErMi), Lithuanian (@karolis_sh), Bulgarian (@byurhanbeyzat), Serbian (@aleksa.piljevic), Malay (@wfxyz), Croatian (@VladoDev), Japanese (@HiYukoIm), Persian (@Noorullah_Ah), Romanian (@AlinaCSava), Telugu (@mksrivishnu). Logo: @salatielsq.
God Bless Us
Loading demo... Please wait