Visually debug and inspect CSS layouts. Highlight margins, paddings, grid/flex containers, positions, and display types. Perfect for troubleshooting layout issues without using browser dev tools.
Visualize and debug your CSS layouts with real-time feedback
See content, padding, border, and margin visually highlighted.
Automatically detects and labels elements as flex, grid, inline-block, etc.
Inspect elements with absolute, relative, sticky, or fixed positioning.
Click on any element in the preview to inspect its layout details and computed styles.
View live CSS properties and adjust margins, padding, and widths in real-time.