👋 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.
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!🚀
Still after 3 years, CSS Scan remains an essential in your list of favourite extensions! A great time saver. Congratulations on the launch @gvrizzo 👏👏👏
@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.
Report
@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. :)
Report
@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. :)
Replies
TailConverter
Mind Mingle - Coding Bootcamp
TailConverter
TailConverter
Picaboo: Widget for Friends
TailConverter
AppLogger by PLG Works
TailConverter
TailConverter
Depth Wallpaper
TailConverter
TailConverter
Image AI App
TailConverter
Akriti! 100+ Abstract Vector Shapes
TailConverter
TailConverter
TailConverter
Marketing Examples
TailConverter