CSS Layout Visualizer

About

See the CSS behind any layout — instantly.

CSS Layout Visualizer overlays color-coded visual guides directly on top of any webpage, so you can understand how a page is built without digging through DevTools. Flip on a mode and every Flexbox container, Grid track, box model, or positioned element lights up in place. Perfect for developers, designers, students, and anyone debugging tricky layouts.

🎯 Six visualization modes

Flexbox — Highlights every flex and inline-flex container and its items.
Grid — Reveals grid containers and their cells/tracks.
Box Model — Draws all four nested layers (margin, border, padding, content) on each element.
Position — Flags every element that isn't position: static (relative, absolute, fixed, sticky).
Overflow — Spots elements clipping or scrolling content (hidden, scroll, auto).
Z-Index — Maps stacking order with a cool-to-warm color scale so you can see what sits on top.
🔍 Hover-Inspect

Turn on Hover-Inspect and move your cursor over any element to see a live info card with its dimensions and key computed CSS properties — no panels to open, no element-picking clicks.

⚙️ Built for real workflows

Combine modes — Stack multiple overlays at once (e.g. Flexbox + Box Model).
Show Labels — Annotate overlays with the property values they represent.
Dim Unselected — Fade everything else so the matched elements pop.
Persistent state — Your active modes are remembered between sessions.
One-click Clear All — Remove every overlay and reset the page instantly.
🛡️ Clean & conflict-free

Overlays are drawn with isolated custom elements that reset their own styles, so the extension never interferes with the page's own CSS. Overlays automatically re-align when you resize the window.

✨ Why you'll love it

Works on any website — no setup, no configuration.
Faster than hunting through the DevTools inspector for layout info.
Great for learning how real-world sites are structured.
Built on Manifest V3, the current Chrome extension standard.
Install it, click the toolbar icon, pick a mode, and start seeing layouts the way the browser does.