CSS Peeper: new tool for Web Designers

Have you ever wondered which font is that site using, which color palette or where did they get those cool icons? You can use a web inspector and search through the code but you need some basic code knowledge. Web designers need a more visual way to inspect styles.

CSS Peeper is a Chrome Extension, available in the Chrome Store. As you can read in their web, its a “Smart CSS viewer tailored for designers”. As a Muse Designer, this extension has become my new favourite tool. Try it, you will love it too!

It is very simple to use. You can download the extension here. Once downloaded, an icon will appear at the top right of Chrome. Whenever you want to inspect an element, you just need to click on it and a window with all the information will pop out.

 

css-peeper-designers-inspector7

 

 

First thing that it will show is the general information of the web. You can switch to the drop icon and it will display the color palette used throughout the web! You can directly copy the hex code to your clipboard from the extension and bring it into Muse. If you switch to the camera icon, you will find all the assets used. You can download them individually or the whole set in a zip.

css-peeper-designers-inspector5

css-peeper-designers-inspector6css-peeper-designers-inspector2

If you are just interested in one specific element, like a button or a background, and you are wondering what color or effect it is using, just click on the element and all the information will display. CSS Peeper will identify the font, the size, how it is aligned, the color used and the effect.

css-peeper-designers-inspector1

 

Why do I love it? Why is this useful for Muse designers? It is neat, easy to understand, organized and very visual. This platform was created to make web designers job easier and indeed it does.

Watch the tutorial!

 

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top