CSS Peeper is your ultimate Chrome extension designed to streamline the design inspection process for designers and developers. Instead of sifting through complex code, CSS Peeper allows you to effortlessly extract style information, saving time and improving workflow efficiency.
Written By Dawid Młynarz
Last updated 24 days ago
Quick start
With CSS Peeper, there’s no complicated setup or learning curve – just install the extension and start inspecting design elements right away. Whether you're analyzing typography, colors, or assets, everything is ready for you immediately. Simply point, click, and explore a website’s styles effortlessly. It’s the fastest way to access and understand design properties without digging through code.
Install the CSS Peeper extension – Visit the official CSS Peeper website and click the "Get CSS Peeper for Free" button to download the Chrome extension from the Chrome Web Store. After installation, pin the extension to your browser toolbar for easy and quick access.
Start inspecting – Simply point and click any element on the website to instantly discover its design properties. You can also quickly browse the Colors, Typography, or Assets used across the site.
Create an account – Sign up for a free CSS Peeper account to unlock additional features, including Smart Inspections. If you haven't already, start a free 7-day trial to experience all premium features, with no credit card required!
Interface overview
Get the most out of CSS Peeper by familiarizing yourself with its interface. Save hours by effortlessly inspecting design properties with a simple point-and-click.
Inspect/Preview Mode Toggle – Switch between inspecting design properties and browsing the website seamlessly.
Sidebar Mode – Transform window into a docked sidebar for an unobstructed website view.
Header – Displays key controls and settings for managing your experience.
Content Area – The main workspace where design details, colors, typography, and assets are displayed.
Tab Bar Navigation – Easily switch between sections like Overview, Colors, Typography, and Assets.
Core features
Inspecting elements
Once CSS Peeper is active, select any element on the website to learn its properties. Learn more about how Inspector features.
Inspect/Preview mode
CSS Peeper launches with Inspect Mode turned on by default. To pause the inspection and return to browsing, simply toggle the Inspect Mode switch in the top-left corner. This feature is available from the Professional plan.
Drag the window
You can move the CSS Peeper window to any convenient position on your screen by using the drag feature in the top-left corner of the interface.
Sidebar mode
By default, the CSS Peeper window floats above the website content. To gain full access to the website’s viewport, switch to Sidebar Mode by toggling the option in the top-right corner of the interface. This feature is available from the Professional plan.
Dark mode (Coming soon)
Enjoy a more comfortable viewing experience, especially in low-light environments. You can personalize your experience by selecting your preferred screen mode. Dark Mode can be easily toggled in the Settings section of your Account page. This feature will be available from the Professional plan.
