CSS Peek: Element Inspector

Inspect elements instantly, view their CSS properties, colors, typography, xpath and more.

CSS Peek: Element Inspector lets you quickly inspect any element on a webpage and instantly visualize its CSS box model, styles, colors, typography and more. See clear overlays of margin, border, padding, and content, along with their exact pixel values, and access full CSS styles for any element. Perfect for developers and designers who want to debug layouts, understand spacing, and explore page design at a glance. ✨ Features: - Click any element to view its full CSS styles. - Visual box model diagram with color-coded layers and pixel values inside each layer. - Inspect and copy the color palette of the page. - Inspect and copy typography and fonts used on the page. - View and download assets from the webpage. - Manipulate the clicked element styles within the Manipulate tab. - A live color picker that allows selecting a color from anywhere on the page and updating the UI preview in real-time. - When an image element is selected, you can drag & drop a new image directly onto it. - The extension allows adjusting CSS of the selected element using keyboard shortcuts. This helps test spacing, sizing, colors, etc., without touching the code. - XPath Locator that finds both absolute and relative XPath selectors for an element, suggests improvements for more stable locators, and generates ready-to-use Playwright and Cypress code snippets. - Light/Dark mode switcher. Lightweight and user friendly.