Overview
Grid overlays, element inspection, accessibility checking, spacing tools, rulers, and more for UI/UX designers and developers.
1. Grid Overlay — Bootstrap-style column grid with full control over column count (1–24), gutter, max-width (fluid or all Bootstrap breakpoints), color+opacity, and horizontal offset. Drag the floating handle directly on the page to reposition. Stack multiple independent grids with different colors. 2. Element Inspector — Hover any element to see its tag, ID, classes, dimensions, position, z-index, typography, and live WCAG contrast ratio. Click to pin the selection and auto-copy the computed CSS to your clipboard. 3. Accessibility Checker — One-click WCAG 2.1 AA/AAA audit. Scans all text nodes, calculates real contrast ratios (traversing transparent backgrounds up the DOM), flags font-size violations, and overlays red/amber badges directly on failing elements with ratio values visible on-page. 4. Spacing Visualizer — Hover any element to see a tooltip with its exact margin and padding values on all four sides, and an orange/cyan/purple visual outline distinguishing the three box model zones. 5. Breakpoint Badge — A fixed badge in the corner shows your live viewport width and current named breakpoint. Supports Bootstrap 5, Tailwind CSS, and MUI. 6. Rulers & Guides — 20px rulers along the top and left edges with tick marks. Click either ruler to drop a draggable dashed guide line; double-click a guide to remove it. Mouse coordinates track in real time. 7. Color Picker — Uses Chrome's native EyeDropper API to sample any pixel on screen, returning HEX, RGB, and HSL values with a one-click copy button.
Details
- Version1.0.0
- UpdatedMay 4, 2026
- Size26.71KiB
- LanguagesEnglish
- Developer
Email
sitaram075@gmail.com - Non-traderThis developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.
Privacy
This developer declares that your data is
- Not being sold to third parties, outside of the approved use cases
- Not being used or transferred for purposes that are unrelated to the item's core functionality
- Not being used or transferred to determine creditworthiness or for lending purposes
