CSS Scan

The fastest and easiest way to inspect and copy CSS

#5 Product of the DayJuly 25, 2018

Inspect on steroids — Visualize the CSS of any element you hover over, instantly, and copy its entire rules with a single click.

Discussion
Would you recommend this product?
25 Reviews5.0/5
👋😁 Hey Product Hunt, 🔴 The problem While working with web development, you've probably found yourself scrolling through inspect element a lot or looking for the computed styles tab on your browsers developer tools (and probably found some CSS properties that you've never heard before 😂). Sometimes you just want to get 1 thing from a framework or are curious about what is the border-radius, box-shadow, etc of an element you just saw on the internet. ✅ The solution This tool is faster than inspect element and gives all of the styles with their shorthands. This means you don't get messy ... or overwritten styles. Want to copy them? Cool, you just have to click! 🎉 3 Products in 3 Months This is my last product of the challenge I made up for myself to ship 3 products in 3 months. CSS Scan took me 50 hours and 17 minutes to develop. Inspired by @levelsio, I recorded all the development and made a timelapse video of it. Check it out: 👇
🎁 Features: 💫 Instantly check computed styles 📋 Click to copy 📏 Check the real size of elements 🧐 Outline all elements ✋ Ignore box-sizing or hover styles 💵 Price I decided to price it as Pay what you want. 😁 I would love to hear from you all how you can have a better experience using CSS Scan! Thank you!
Upvote (16)Share
@gvrizzo Love that you built this out in the open! Keep shipping :)
Upvote (3)Share
@gvrizzo video is super cool! three feature requests: 1. copy psuedo selectors if i'm copying the CSS for a button, input, etc. it would be great if CSS Scan copied the different states: :hover, :focus, :active, etc. 2. copy "style anchors" grab class names or ids - whatever the CSS is attached to add it to the output. 3. copy descendent CSS if i select a parent container, CSS Scan would copy the CSS of the children recursively. maybe you can specify a certain number of levels to limit the copying to.
Upvote (3)Share
@tomfme These are all cool ideas, tom! Thanks for the features requests, I'll make some updates on the extension. I can guarantee you the number 2, have to look the other ones. Thanks!
Upvote (1)Share

I can't believe how many times I've seen complex designs and wondered the styles/layout behind it. This is the simplest answer ever made. Incredible.

Pros:

Incredibly unique and useful

Cons:

None so far

Upvote (8)Share

Love this thing - helps me learn how others build layouts, and great for debugging too. Win!

Pros:

Helps analyze CSS for anything!

Learn CSS by seeing real world examples

Cons:

None yet.

Upvote (7)Share

the best tool to learn css from beautiful sites designed by professional teams

Pros:

Cool to make css learning easy and implement!

Cons:

none

Upvote (5)Share
Another Maker's Kitchen Chef back at it again 😃 Innovative and this is literally what all web developers were missing. Inspecting on steroids!
Upvote (4)Share
@dinuka_jayasuriya I have to thank you for creating it and all the members there. You are all very supportive! Thanks 🙏
Upvote (2)Share