Overview
Color-code margin / padding / gap by px value on web pages, with a floating menu and badges for intuitive inspection.
Spacing Palette is a visualization tool that lets developers read every margin, padding, and gap on a web page at a glance. It frees you from opening DevTools and chasing the Styles panel every time you check spacing. Once enabled, the entire page is automatically color-coded, and px numbers are expressed at the center of each overlay. Values are grouped into three families: other even numbers in orange→red, multiples of 8 or 4 (8px grid compliant) in yellow-green→green, and odd numbers in blue→purple. Hovering fades non-matching overlays so target spacing stands out. You can turn the px badges on or off as needed. The floating menu lists each px value with its M / P / G counts. Hovering items in the list highlights the matching overlays, and clicking it scrolls the viewport to the target. If the targets are already visible, the badges animate to highlight the location. You can drag or collapse the menu so it never gets in the way. Use the context menu to toggle the extension, overlay visibility, or the px badges from anywhere on the page. For front-end engineers, UI designers, and QA teams who need precision in layout implementation.
Details
- Version1.1.0
- UpdatedJanuary 13, 2026
- Offered byKaworu Inoue
- Size35.25KiB
- Languages14 languages
- Developer
Email
dev_kwr@icloud.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
