Browser extension to inspect on steroids β Visualize the CSS of any element you hover over, instantly, and copy its entire rules with a single click.
π Hello Product Hunters! :)
π― I started CSS Scan 10 months ago with the vision of creating the fastest and easiest way to inspect and copy styles of any element across the web.
π Since then, it has grown to 3,800+ professional web developers users worldwide and received lots of improvements and new features - while still being easy and fun to use :)
β¨ CSS Scan is especially useful for:
- Discovering how your favorite websites are styled;
- Debugging your own code;
- Moving your codebase;
- Copying specific elements from frameworks/themes/templates to use them without importing huge CSS files.
π° CSS Scan is a paid extension that started as a side project and right now happily is my full-time work, so you'll always receive updates! π
πΉ To celebrate Mom's day is happening a limited 40% offer on the website!
π Try yourself a free demo here: https://getcssscan.com
π This is a work that has taken me almost 1 year so far, so Iβm excited to share with you and genuinely interested in hearing what you think about it.
π Thanks to everyone that already bought it and supported my work!
If you have any ideas or suggestions, I'm all ears.
@aaronoleary Hey Aaron! Thanks for asking it :)
Since the first launch, I've added:
+ Code syntax highlighting
+ Show rendered font
+ Show element dimensions
+ Option to pin the box
+ Shortcuts (Lots of people asked)
+ Option to move the UI buttons to the bottom
+ Option to pause the scanner
+ Option to truncate classes names
+ Show :hover styles separated
+ Copy :hover styles merged or separated
+ Traverse the element and scan the parent
+ Identifies when elements are being overlapped
+ Now it works on iframes!
+ More shorthand rules support
+ i18n: Chinese (simplified and traditional) and Portuguese
+ Redesign UI and landing page
Congratulations on the launch Guilherme! CSS Scan 2.0 is super fast!! & super easy for me to inspect & copy the css! This is super useful tool & the price is affordable. Love the "Lifetime license". Thank you for making this. Much love from Singapore!
Loved seeing the journey of CSS Scan from 1.0 to 2.0. And the commitment of Guilherme to improve the product from looking barebones to now professional. Congrats on the launch π
PS: Love the landing page and social image.
Pros:
Literally the best chrome extension ever made for Frontend Developers
Edit again. I wrote a harsh review due to the current license limitation (2 uses) and I had to reinstall it >2 times, so it wouldn't work. Turns out this is not a greedy decision to make customers buy it more times like I thought at first, but for piracy reasons. @gvrizzo kindly contacted me, offering help and a new license without any hesitation so just keep in mind that while he's working on a better license system, be careful and don't uninstall/reinstall the extension too much.
@inthe0n Hi, Pedro! Thanks for the comment :)
We just launched a new licensing system which right now give the users the freedom to manage their activations by themselves, allowing them to uninstall/reinstall, change computer, etc... Win-Win! π»
@gvrizzo this is such an awesome tool. If I purchase license and use it on Chrome and Firefox on the same computer is that one activation of the license or two?
@scottcents Hi, Scott! That would count as two activations, but right now we have a new system where you can manage your activations easily, deactivating and reactivating when needed. https://mycssscan.com
@gvrizzo I have 2.4.4 version on my browser. Is it the latest one?
Anyway, one suggestion, please add font size setting, because sometimes for elements with alot of properties, we can't see all properties in a small screen (for me 13' mbp).
Guilherme works hard on creating the best experience for developers and it quickly has become a go-to tool in my development workflow. Keep it up Rizzo!!
Pros:
Super easy to use, saves me a lot of time and keeps improving
TailConverter
TailConverter
TailConverter
eu/acc: European Accelerationism
TailConverter
TailConverter
Product Hunt
TailConverter
Random Elon
Overall just a great product, bought the first version last year and it's been a trusty tool in my dev kit ever since.
Pros:Best purchase that I ever made buying CSS Scan
Cons:None
TailConverter
IconShock
TailConverter
Away From Keyboard (AFK)
Loved seeing the journey of CSS Scan from 1.0 to 2.0. And the commitment of Guilherme to improve the product from looking barebones to now professional. Congrats on the launch π PS: Love the landing page and social image.
Pros:Literally the best chrome extension ever made for Frontend Developers
Cons:None
TailConverter
June
TailConverter
Keyframes
TailConverter
GiveYaw
TailConverter
Edit again. I wrote a harsh review due to the current license limitation (2 uses) and I had to reinstall it >2 times, so it wouldn't work. Turns out this is not a greedy decision to make customers buy it more times like I thought at first, but for piracy reasons. @gvrizzo kindly contacted me, offering help and a new license without any hesitation so just keep in mind that while he's working on a better license system, be careful and don't uninstall/reinstall the extension too much.
Pros:(1) It's fast (2) Pinnable snippets.
Cons:None
TailConverter
Emojifs
TailConverter
TailConverter
TailConverter
TailConverter
Producer Stash
TailConverter
TailConverter
Mind Mingle - Coding Bootcamp
Guilherme works hard on creating the best experience for developers and it quickly has become a go-to tool in my development workflow. Keep it up Rizzo!!
Pros:Super easy to use, saves me a lot of time and keeps improving
Cons:None!
TailConverter
tradedomainswith.me
TailConverter
The Mac Index
TailConverter
TailConverter
TailConverter
Book About Remote Work
TailConverter
Know Your Worth
TailConverter