CSS Layout Visualizer

Visualize CSS layout models — Flexbox, Grid, Box Model, and positioning — overlaid directly on any webpage.

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.