GetLayers: CSS Inspector & Asset Downloader av GetLayers, PajaTools

See a design you love? Hover it, click it, and it's yours.

GetLayers turns any website into a source you can copy from. Inspect an element, get clean code for your stack, paste it into Figma as real layers, measure the spacing, pick the colors and fonts, and save the images, icons, videos, audio, fonts and files the page uses. No DevTools digging, no screenshots and guessing.

INSPECT AND COPY IN ONE CLICK
- Hover any element to see its styles, box model, typography, colors and contrast at a glance
- Click to copy the code and pin the element, then move around the page with the arrow keys
- Export to 10 code formats for web, mobile and design tools, from plain CSS to Tailwind, React, Flutter or SwiftUI
- Preview an element on its own, take a clean screenshot of it, or export all widgets as a ZIP

COPY TO FIGMA (Pro, beta)
- Paste an element or the whole page into Figma with Cmd+V or Ctrl+V
- You get real frames, text and images with auto layout, not a flat picture
- Export a style guide with the page colors and text styles

DOWNLOADS WINDOW (press G)
- Every image on the page, including CSS backgrounds, responsive versions, SVG icons, Lottie and Rive
- Sizes are grouped and the best quality is marked, so you never save a blurry thumbnail
- Videos with a preview frame, streams saved as a single file, and subtitles as VTT or SRT
- Audio, fonts with a live preview, and the PDFs, documents and archives the page links to
- Search, filters, file name templates, copy links and a list of recent downloads
- Every video found stays in a queue, and downloads keep running even if the page reloads
- Pro tools: scroll and collect, convert and resize images, export icons for code, fonts as TTF or OTF with a font kit ZIP

EDIT LIVE, RIGHT ON THE PAGE
- Change any style and see the result instantly, with undo
- Save your edits as profiles that apply automatically next time
- Compare two elements side by side to see what differs
- Move elements around to try a new layout

MEASURE LIKE A DESIGNER
- Spacing overlays for padding, margin and gaps
- A ruler for the exact distance between two elements
- The page's color palette and a font inspector

BUILT FOR AI WORKFLOWS
- Connect your AI coding assistant through the built-in MCP server, so it can inspect elements and edit styles on a live page

FAST AND FRIENDLY
- Choose how you use GetLayers on first start: inspect and copy styles, or download assets. Switch anytime in Settings
- A toolbar you can drag anywhere, plus a DevTools sidebar
- Keyboard shortcuts for everything, press ? to see them all
- Available in 20 languages

FREE AND PRO
The free plan includes Live Inspect, CSS and JSON copy, the color and font tools, the DevTools sidebar and a limited downloads window. No account needed.
Pro unlocks every format, Copy to Figma, live editing with profiles, measuring tools, element comparison, screenshots, ZIP export, unlimited downloads with the Pro tools and the AI integration. 7-day money-back guarantee.
Try Pro free for 7 days: get a free key by email and paste it in Settings, no card needed.

PRIVACY
No ads, no account for the free plan. Your pages, edits, downloads and the addresses you visit never leave your browser. Pro sends your license key to check it. Anonymous counts of which features are used are sent only if you allow it, and you can turn them off in Settings. The optional feedback form sends only what you type, plus the extension version, browser, system, language and plan.

PLEASE NOTE
GetLayers saves files that your browser already loads. Respect copyright and site terms. DRM-protected streams and YouTube videos are not supported.

Website and pricing: https://getlayers.pro
Questions or ideas: getlayers.help@gmail.com