SideStyle - CSS Inspector

Analyze fonts, colors, and style information from web pages and save them to the side panel.

SideStyle - Professional CSS Inspector & Style Saver SideStyle is a powerful tool for web designers and developers that allows you to inspect, capture, and organize CSS styles directly within the Chrome Side Panel. Stop digging through complex DevTools and start building your style library with a single click. 【Key Features】 ・Instant Style Inspection: Hover over any element on a webpage to see it highlighted, then click to instantly capture its CSS properties. ・Comprehensive CSS Data: Extracts detailed information including: 　・Typography: Font family, size, weight, line height, and letter spacing. 　・Colors & Decoration: Text color, background color (with visual color chips), border-radius, and box-shadows. 　・Layout & Box Model: Padding, margin, and exact dimensions (width/height). ・Side Panel Workflow: Captured styles are displayed in the Chrome Side Panel, allowing you to reference them without switching tabs or losing focus. ・One-Click CSS Copy: Easily copy the entire CSS block of an element or individual property values to your clipboard for use in your projects. ・Persistent History: Your inspected styles are automatically saved to local storage, so they remain available even after you restart your browser. 【How to Use】 1. Open the SideStyle panel by clicking the extension icon. 2. Click the "Get Style" button to activate the inspector. 3. Hover over any element on the page to see the blue highlight. 4. Click an element to save its styling to your side panel list. 5. Click any value to copy it, or use the copy icon for the full CSS rule.