Subscribe
Sign in
CSS Scan 3.0 — The fastest and easiest way to check, copy and edit CSS
Goodbye to "Inspect Element" — Check the CSS of any element you hover over, instantly, and copy its entire rules with a single click ⚡.
46
Replies
Johan Steneros
Very handy tool.
Share
@joulse Thank you so much, Joulse! 🙏🙌 It's an honor to have your testimonial on our landing page.
Guilherme just keeps pushing the bar when it comes to world-class developer tooling. Awesome launch!
@zenorocha Such an honor to hear this from you, Zeno, you're awesome! 🙏 Thank you!!
@visualintentau Hi, Paul! This update is free and automatic if you have previous versions of CSS Scan 💖
👋 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.
I've been around since this product was first released and it's incredible to see how far it has come and still evolving! Such a successful case.
Congratulations @gvrizzo, this new launch is looking great!
@azabraao Thanks a lot for all the help from the beginning, Abraão. You made all of this possible! ❤️🙏
@brian_teeman Hi, Brian! No, it's a different product. CSS Scan Pro (soon to be renamed to CSS Pro) has different features - I will focus even more on the Visual Editor and editing CSS in the next updates after the rebranding, while CSS Scan will be the perfect tool for inspecting/copying CSS.
@gvrizzo Thanks for the answer. From the demo it looks like in v3 you dont have the visual editor or the ability to click on a colour to change it that are both in pro.
@brian_teeman Yes, that's right. On CSS Scan, you can only edit CSS via the Code Editor. On Pro, you have visual controls that write CSS code for you. This is going to be the focus of each product. CSS Scan for inspecting and copying, Pro for better editing. :)
@brian_teeman @gvrizzo Great tool, congrats Guilherme! Btw, any plan to offer a lifetime license -- maybe for a limited promo period -- for the Pro version (I got to see it and liked it even more than this basic version)? If you do, I'll be first in line. :)
@j_p7 Hi! Are these the demo or "buy" buttons? If yes, I've turned it off for the demo so that people can actually click "Buy" even with the demo open 😅
@gvrizzo I bought a license this morning and solved a padding issue I’d been working on for ~week. Great product and best of all, it’s coming to SigmaOS in the next couple of days! Thank you!
@southdigital Thanks a lot for buying it and for the support, David! 🙏 Really appreciate it, and I'm glad it was helpful to you. Also, big thanks for helping us bring it to SigmaOS ❤️
Really nice app, will get some licenses for my team!
Only thing i think is missing is changing values (i.e. pixels and percentages) with arrow keys.
This looks super cool! I'm sure this will provide a much better experience for web developers and speed up the workflow and development drastically.
Great job! Congratulations on the launch!🚀