Verbatim - Copy the real CSS from any website

Description

Copy the CSS that actually applies to an element, with its states and breakpoints intact, and see it render before you use it. Verbatim copies the design of a web page the way it was actually written. Point at anything on a page and get the real CSS: the rules that matched, in cascade order, with their hover states, their media queries and the custom properties they read left intact. Not a computed-style dump, which discards the five things that decide what you actually see. Then it checks its own work. What it copied is rendered in an isolated frame and compared with the live element, property by property. If something disagrees, it says so before you paste it anywhere. No account, no sign in, no trial. Thirteen tools on a toolbar that lives inside the page you are already looking at, not in a popup, each with one keyboard shortcut. POINT AT THINGS P Pick element. Hover to outline, click to lock. Takes the whole component by default, the element and everything inside it, so what you paste actually renders. M Measure. A box model shaded in place: margin, border and padding separately, with rulers out to the edges of the viewport and dimensions to a tenth of a pixel. D Design system. The whole page at once. Every colour ordered by how much of the screen it covers with its role named, the type scale with the weights in use, spacing, radii, shadows, breakpoints, the site's own custom properties, and a contrast check on the text. B Design prompt. A whole page written out as one document, for when you want something in the same style rather than one piece of it: the palette, the fonts and where they are served from, the CSS of the components that repeat, every section in order, the assets it loads, and what moves. TAKE ONE THING C Sample a colour. Uses Chrome's own eyedropper, so it reads any pixel on screen, including inside images, canvas and video. F Fonts in use. The family a page really renders in, established by measurement rather than by reading the first name in the stack, with every size, the weights at each size, and the file behind each webfont. I Images and SVGs. Every image, inline graphic, background and video poster on the page, largest first, filterable, and packaged as one archive built in your browser. CHANGE THE PAGE E Edit text in place. Click any text and type over it. Real copy in a real layout, before anyone builds it. X Hide elements. Remove a cookie banner, a sticky header or a chat bubble. Z brings them back one at a time, exactly as they were. V Move elements. Drag anything anywhere. It moves by transform, so nothing around it reflows and putting it back is exact. TAKE IT WITH YOU S Screenshot. The toolbar hides itself and waits for a repaint first, so it never lands in the capture. Cropped to your selection or to the viewport. W Save page HTML. The page exactly as it stands right now, banner dismissed and menu open, as one file next to its styles. G Send to agent. Hands the selection to a local server on your own machine, for the pages a headless browser cannot reach. ONE PICK, FOUR WAYS OUT Picking opens a window you can drag and resize, with the extraction rendered back underneath in an isolated frame, so you can see whether it is right before you paste it. Code gives you the markup beside every rule that applies, in cascade order, with the at-rules kept. The markup pane speaks plain HTML, or a component for the framework you already work in. Tailwind gives you the same selection as utility classes, with the theme values those classes depend on. Prompt gives you a written brief carrying the values, the states, the breakpoints and the contrast figures, ready to paste into a chat. Inspect gives you the box model to a tenth of a pixel, and every matched selector sorted by specificity with its layer and at-rule context. WHAT IT GETS RIGHT THAT A COMPUTED STYLE CANNOT @layer precedence, which specificity alone cannot explain. Stylesheets served from another domain, which a page is usually forbidden to read back, refetched and reparsed so the rules are actually there. Native nesting, with the ampersand resolved against the parent selector list. Shadow roots and adopted stylesheets, walked recursively. Interactive states, found by matching selectors rather than by watching where the mouse is, so a state nobody hovered still comes out. Breakpoints that do not apply at your current window width, kept as breakpoints. Custom properties both ways: the name, and the value it resolves to. Shorthands as they were authored, because the browser leaves the longhands empty when a shorthand contains a variable. AN OPTIONAL AI KEY, IF YOU WANT ONE Off until you set one, and used for two things a model is better at than a stylesheet reader: naming a class that a build step turned into a hash, and describing the character of a design on top of measurements it is not allowed to change. After a rename, every declaration is compared with what went in, and an answer that altered one is discarded with the exact output left standing. You supply your own key from the provider you choose. The request goes from your browser to that provider. It does not pass through our servers, because we have none. Leave the field empty and nothing is sent anywhere at all. FOR CODING AGENTS An optional server runs on your own machine and gives any editor that speaks the Model Context Protocol the same extraction as tools it can call itself, including a step it can use to verify its own work. The extension's handoff covers what a headless browser cannot see: anything behind a login, and any element that only exists while a menu is held open. That server is a separate download and is not part of this extension. Everything described above it, in the browser, is free. PRIVACY No account, no sign in, no analytics, no telemetry. Nothing is injected into any page until you press the shortcut or click the icon. There is no server of ours for anything to be uploaded to. Settings live in local storage on your device. The one exception is the optional key described above: if you set one, the extraction of the element you picked goes to the provider you chose, and to nobody else. Leave it empty and that never happens. Full policy at https://verbatim.design/privacy Free, with no account: picking, measuring, inspecting, design systems, design prompts, colours, fonts, assets, screenshots and page saves.

Details & SEO