StyleRay

Inspect and compare computed visual CSS on any page: box model, typography, colors and layout, in a side panel.

StyleRay is a focused visual CSS inspector for the page you are on. Open it from the toolbar, start inspecting, and point at any element. StyleRay highlights the element under your pointer and shows its rendered size on the page. Click it and the side panel shows the values your browser computed for it, grouped for reading: • Box Model — a diagram with the content box in the centre and the computed margin, border widths and padding around it, plus the rendered size • Typography — font-family, font-size, font-weight, line-height, letter-spacing, text-align and color • Surface — background color, border colors, styles, widths, corner radii, box-shadow and opacity • Spacing — all four margins and all four paddings, individually • Layout — display, position, overflow and z-index, plus the flex-specific or grid-specific values when the element is a flex or grid container Filter the rows by property name to find one value fast, and arrange the sections in the order you actually read them — StyleRay remembers that order for next time. Copy any single value, copy a row as a `property: value;` declaration, or copy the whole element as one deterministic CSS block in a fixed property order. Comparing two elements that should look the same: pin the first as A, pick the second as B, and StyleRay lists only the supported computed values that actually differ — with A and B side by side, and no opinion about which one is right. You can reveal the matching values too, or copy the differences as plain text for an issue or a chat. What StyleRay reports is observable browser state, not the page's source. It does not reconstruct the authored stylesheet, the cascade, selectors, inheritance, media queries or pseudo-state rules, and font-family is the computed font stack rather than proof of which font file was drawn. Privacy and access: StyleRay has no account, no backend and no analytics. It requests no permanent access to any website — it can only read the tab you open it on, only after you click its toolbar icon there, and only once you start inspecting. Everything it reads stays in your browser; nothing is transmitted anywhere. The only thing it saves is your appearance preference.