p/css-scan The fastest and easiest way to inspect and copy CSS

CSS Scan 3.0 - The fastest and easiest way to check, copy and edit CSS

TailConverter

Goodbye to "Inspect Element" — Check the CSS of any element you hover over, instantly, and copy its entire rules with a single click ⚡.

3yr ago

Replies

Best

Guilherme Rizzo

TailConverter

Maker

👋 Hi Product Hunters! :) 🎯 I started CSS Scan over 3 years ago to create the fastest and easiest way to inspect and copy styles of any element across the web. 🐣 I was 19 years old at that time, and it was something that forever changed my life. Here's the video for the first 50 hours of development (from 0 to the 1st launch). 🚀 Since then, it has grown to 14,000+ professional web developers from 116 countries using it to build world-class websites. ⚡ CSS Scan is a browser extension that helps you understand how everything works without you having to waste time hunting through infinite CSS rules on the browsers' Dev Tools. 🌟 Available for Chrome, Firefox, Safari, and Edge. 🚀 With CSS Scan, you can: - Inspect elements on the fly quick and easy - Discover how your favorite websites are styled - Copy any element you want - Copy multiple elements with a single click - Get clean CSS code when inspecting, without wasting time scrolling through infinite CSS rules on the browsers' Dev Tools. - Finish your work faster - Copy specific elements from frameworks, themes, or templates to use them without importing their huge and heavy CSS files. - Export elements to Codepen to save them on the cloud (bookmark) and play with their code - Find out which fonts websites use - Easily see if elements are correctly aligned with the Grid and Guidelines features. - Make quick edits on elements and experiments - Discover the dimensions in pixels of any element ✨ Here's what's NEW since the last launch: 🪄 Edit the CSS code 🚀 Edit pseudo-classes, pseudo-elements, and keyframes code! 📱💻🖥 Copy, inspect, and edit Media Queries 📦 Copy the CSS and HTML of the child elements ⚙️ HTML attributes 🌳 DOM tree: inspect or copy any element 🔍 See where the CSS comes from (files and selectors) 📦 Export to Codepen 📱🖥 Copy all media queries with one click ⚙️ Copy HTML code ✨ 2 new ways of copying selectors: Original or Smartly Generated 🧪 Convert font-size measurement units to px 🐉 Drag pinned CSS windows 🎨 Color previews / hints / highlights 🖱 Option to pin on click 📋 Button to copy the CSS code from pinned CSS windows 🎁 New "What's New" button with changelog 🧬 Support for inherited styles 🎉 Support for all pseudo-classes and pseudo-elements 💡 Tooltips 📏 Guidelines 🤝 Tailwind pseudo-classes support Improvements: ✏️ A complete rewrite of the Inspect, Copy, and Export to Codepen features (is much more accurate now) 👨‍💻 A better Code Editor 🏡 Scan local files (Chrome and Safari) 💖 Better experience when using Devtool's Device mode 👩‍🔬 CSS inspection algorithm improvements 🧠 Automatically ignore Elementor's and WordPress UIs 🗣 New translations and improvements ⚙️ Export to Codepen with preprocessor setted 🔍 More specific CSS selectors when copying or exporting elements ✌️ Full Tailwind support 🏁 Better translations 🟦 New Options Menu Fixes: 🐛 20 bug fixes 📋 Here's the full changelog. 💰 CSS Scan is a paid extension that started as a side project, and now it's happily my full-time work, so you'll always receive updates! 🙌 🔥 To celebrate the launch, I'm running a limited 59% offer on the website! 🎁 Try yourself a free demo here: https://getcssscan.com ⚡ Already have it? Great! The extension will update itself automatically. 🙏 I'm excited to share it with you all and genuinely interested in hearing your thoughts. 💌 Thanks to everyone that already bought it and supported my work! If you have any ideas or suggestions, I'm all ears.