Skip to content
Related Articles

Related Articles

CSS Peeper – New tool for Web Designers

Improve Article
Save Article
Like Article
  • Last Updated : 14 Sep, 2021

CSS Peeper is a browser extension that is a CSS viewer and is tailored for Designers. Using this designers can focus on design, and spend as little time as possible digging in code. What’s the line height, button, or font size on a website? All these questions get answered using CSS peeper. It enables you to inspect code in the easiest possible way. One can extract CSS and can build beautiful style guides.

Advantages:

  • Easily accessible.
  • Provides intuitive controls.
  • Adaptation and cross-platform for any browser.
  • Gives integration of its functionality into those products where there is no access to the kernel.
  • Combine cloud storage and system into a single workspace.

Disadvantages:

  • Constant updating is required.
  • The various browser needs its adapted version of the program.
  • They often require the ability to read and even change everything on web pages one visits, which in some cases can lead to accidents of data breaches, capture the passwords, track browsing, etc.

Installation:

Installing CSS peeper is like installing any other browser extension and involves only two steps:  

Step 1: Visit CSS peeper in either Chrome Web Store or Firefox Add-Ons and click on add to chrome.

CSS peeper extension

Step 2: Click on Add extension.

 Add extension

Voila, you have your CSS peeper installed. After successful installation, you can see the top right side corner the extension will be added to your browser. 

CSS peeper installed

Usage:

One can use this extension by simply going to the webpage whose CSS you want to know and simply click on it.

Example 1: GeeksforGeeks

General:

In the general tab, only some information is shown about headings, BODY, CSS file size, and load time.

using CSS Peeper on GeeksforGeeks with general tab

Colors:

In the colors tab, we can see all the colors used on the web page with their color code and color. We can also copy the color code from there to our clipboard using the button highlighted below.

using CSS Peeper on GeeksforGeeks with colors tab

Assets:

In the assets tab, we can see all the assets used on the web page and can even export all of them or a few if needed by clicking on export all on top.

using CSS Peeper on GeeksforGeeks with assets tab

Individual elements:

We can even inspect individual elements like buttons and get all the CSS needed to make that button, text exactly like the one shown on the web page. For this, you simply need to click on the element you want to inspect and the CSS peeper will show its properties. A red-liked border comes on the element when you click the area you want to inspect, just like it has come over at “Courses at GeeksforGeeks”.

inspecting individual elements with CSS Peeper on GeeksforGeeks

Below is another example, here we have inspected another element on this page. Arrow is used to show the highlighted area.

Example 2: Youtube

General:

In the general tab, only some information is shown about Fonts like headings, BODY, CSS file size, and load time.

using CSS Peeper on Youtube with general tab

Colors:

In the colors tab, we can see all the colors used on the web page with their color code and color. We can also copy the color code from there to our clipboard using the button highlighted below.

using CSS Peeper on Youtube with colors tab

Assets:

In the assets tab, we can see all the assets used on the web page and can even export all of them or a few if needed by clicking on export all on top.

using CSS Peeper on Youtube with assets tab

Individual elements:

We can even inspect individual elements like buttons and get all the CSS needed to make that button, text exactly like the one shown on the web page. For this, you simply need to click on the element you want to inspect and the CSS peeper will show its properties. A red-like border comes on the element when you click the area you want to inspect, just like it has come over at “Explore”.

inspecting individual elements with CSS Peeper on youtube

Below is another example, here we have inspected another element on this page. Arrow is used to show the highlighted area.

In conclusion, CSS peeper is a very useful extension for web designers who want to get a sneak peek at some web page and want to know the CSS of it. But one should be very careful using this extension as they often require the ability to read and even change everything on web pages one visits, which in some cases can lead to accidents of data breaches, capture the passwords, track browsing, etc.

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!