CSS Inspector
A powerful CSS inspection and live editing tool from DevTools Suite that lets you hover over any element to instantly see its styles, box model, inheritance chain, and Tailwind classes - with real-time editing capabilities.
The Most Powerful CSS Inspector for Web Developers
CSS Inspector transforms how you debug and understand CSS. Unlike browser DevTools, our inspector provides a cleaner, more focused experience with real-time visual overlays showing margins, padding, and element dimensions - all while hovering. Perfect for understanding complex layouts, debugging Tailwind CSS, and making quick style adjustments.
Key Features
Everything you need to inspect, understand, and edit CSS efficiently
Live Element Inspection
Hover over any element to instantly see its CSS rules, computed styles, and inheritance chain. Visual overlays show dimensions, margins, and padding in real-time as you move your cursor.
Visual Box Model Overlay
See the CSS box model come to life with color-coded overlays. Orange strips show margins, green strips show padding, and dimension labels appear automatically for each value - all without clicking.
Live CSS Editing
Click any CSS property value to edit it inline. Changes apply instantly to the page. Add new properties, rename existing ones, or remove them entirely - all with keyboard shortcuts for efficiency.
CSS Rule Discovery
View all CSS rules that match the selected element, sorted by specificity. See which stylesheet each rule comes from, identify overridden properties, and understand the cascade.
Tailwind CSS Support
Dedicated Tailwind tab automatically detects and categorizes Tailwind classes (layout, spacing, typography, colors, etc.). Toggle classes on/off, edit them inline, or add new ones with instant preview.
HTML Source View
Instantly view the clean HTML source of any element. One-click copy to clipboard, with internal inspector classes automatically filtered out for clean output.
Property Toggle & Disable
Quickly enable or disable individual CSS properties with checkboxes. Disabled properties use 'inherit' to properly override original values, letting you see the effect of removing specific styles.
Copy CSS Rules
Copy individual CSS rules or all styles for an element with one click. Output is formatted and ready to paste into your stylesheet, including inline styles, matched rules, and inherited styles.
Inherited Styles
View styles inherited from parent elements in a separate section. Understand which ancestor is providing typography settings, colors, or other inherited properties.
Crosshair Guidelines
Dashed crosshair lines extend from the hovered element to the viewport edges, with distance labels showing exactly how far the element is from each side of the window.
Dimension Badge
A floating badge shows the exact width and height of the hovered element in pixels, positioned near the element for quick reference without cluttering the view.
Computed Styles Fallback
When CSS rules can't be accessed (Tailwind, CSS-in-JS, cross-origin stylesheets), the inspector falls back to computed styles, ensuring you can always see what's actually applied.
Instant Feedback
See CSS changes apply immediately without refreshing. Perfect for rapid prototyping and debugging.
Draggable Panel
Position the inspector panel anywhere on screen. Resize it to fit your workflow.
Keyboard Shortcuts
Press Escape to stop inspecting. Enter to confirm edits. Tab to move between fields.