Aperture CSS — Visual CSS Inspector & Editor

Inspect and edit CSS on any page. Drag any value, see which rule won and why, and keep your edits as a reviewable diff.

Aperture CSS is a CSS inspector and editor that lives on the page rather than in a docked drawer. Turn it on, point at anything, and you get a floating, resizable panel and a tool ring that follows your pointer. Every numeric value can be dragged. The cascade shows every rule that applies and strikes through the declarations that lost. Everything you change collects into a diff you can read, copy and export, instead of vanishing the moment you reload. SIX TABS - Styles — the element's own declarations, with a purpose-built control for each kind of value: colour pickers, box-model handles, length fields with unit chips, easing curves, alignment grids, gradient stops. No text box where a real control would do. - Cascade — every rule that applies, grouped by stylesheet, with overridden declarations struck through, specificity shown and dead rules called out. - Tree — the document as a searchable tree. Click to select. - Page — the page as a whole: the colours it paints, the fonts it loads and the stacks they sit in, every image, icon and background it uses. - HTML — the element as markup. Its tag, its attributes, its contents. - Changes — everything you have edited on this page, as a list and as a diff. ON THE ELEMENT, NOT ONLY IN THE PANEL The box model is editable where the element is: drag its margin, its padding, its border. So is a gradient — its stops, its angle, its centre — on the element it paints. Measure between any two elements with a keystroke, and resize the page to a device without leaving it. FREE Free covers inspecting and understanding a page, completely. There is no padlock on a tab you can open and no dialog before your first edit: - Live editing of any property, with drag-to-scrub on every numeric value - The full cascade: every rule that applies, the stylesheet it came from, its specificity, and which of its declarations lost - The box model, editable on the element itself - The DOM tree, forcing :hover, :focus and :active, and pinning one element - The colour picker, the page's palette, its fonts and its assets - Copying CSS, and the keyboard shortcuts Free edits are real edits. They live in memory, so a reload clears them — and the panel says so the whole time it is open. PRO — one payment, three devices - Changes that keep: the edit ledger, a reviewable diff, saving changes across reloads, and exporting them as CSS or as a patch - Editing a whole rule as text, with highlighting - Value builders: gradients, filters, transforms, stacked shadows, layered backgrounds, and adding a declaration that was never there - Colour and type: tonal ramps, variable-font axes, fluid clamp() values, and trying any Google Font on the page - Motion: scrubbing a running animation, drawing an easing curve, editing keyframes, and catching transitions as they fire - Tools that take over the page: measuring, responsive resizing, docking the panel beside the page, pinning several elements to compare, and inspecting inside iframes - Why one property has the value it has: the rule that set it and everything that rule beat, for that declaration alone - Markup: rewriting an element, adding one beside or inside it, removing one - Page-wide: downloading one asset or all of them, taking the palette or the type away as CSS, JSON or a swatch file, the contrast and CSS audit, grouping the palette by what each colour paints, and highlighting everywhere a value is used Every Pro control stays visible, readable and copyable, with one line saying what it would do. Nothing appears and then greys out mid-gesture. HOW TO TURN IT ON - The toolbar button - Right-click a page and choose "Inspect with Aperture CSS" - Alt+Shift+C, which you can rebind from your browser's extension shortcuts PRIVACY Nothing about the pages you inspect leaves your browser. There is no analytics. The only request the extension ever makes is the licence key you type in yourself, sent once to check it. ACTIVATING PRO Buy a licence at https://aperturecss.com, then paste the key into the Licence section of the toolbar popup. One licence covers three devices; free a seat from the same screen. Pro re-checks about once a day and keeps working offline for up to seven days between checks.