fijjgmefkbbfhobbdeknhpblfpgggkec
Font & CSS Detector - CSS Pully extracts colors, fonts, shadows, and styles from any webpage. Perfect for designers & developers. π Instantly inspect fonts, extract colors, analyze CSS styles, and download all images from any website with CSS Pully β your all-in-one web design extension for Chrome. Perfect for frontend developers, UI/UX designers, marketers, and content creators looking for fast, accurate, and powerful tools to reverse-engineer websites and speed up their workflow. π₯ CSS Pully is a complete solution for inspecting website fonts, grabbing colors, copying CSS styles, downloading website images, and auditing layout properties β all in one click. π¨ Features include: π€ Detect all fonts used on a web page, detect Google Fonts π― Extract color palettes π View detailed typography information β font size, line-height, font weight, and spacing π Get all CSS shadows, borders, border radius, margins, paddings, and layout sizes π Instantly highlight and inspect styled elements directly on the page π Copy full CSS styles of selected elements in one click πΌ Collect all images from a website instantly 𧩠Filter downloaded images by file type β PNG, JPG, SVG, WebP, and GIF π¦ Download all images in a single ZIP file βοΈ No coding skills needed β user-friendly interface for designers and non-tech users π‘ Lightweight and fast β does not slow down browser performance π Works on all types of websites including SPAs and dynamic web apps π§ͺ Perfect for design audits, reverse engineering, debugging CSS, creating style guides, or collecting brand assets β Benefits of using CSS Pully: β All-in-one Chrome extension for font detection, color extraction, and CSS inspection β Super easy to use, even for beginners β Pixel-perfect accuracy for copied CSS values β Saves time by removing the need to manually inspect code β Supports inspection of responsive layouts, font sizes, and visual spacing β Enables one-click image downloader with file-type filters and ZIP export β Ideal tool for website analysis, frontend debugging, and UI style copy β Compatible with Chrome, Edge, Brave, and other Chromium-based browsers π§ Use cases: β Copy font styles and colors from competitor websites β Collect assets to build style guides and UI kits β Extract CSS to recreate design elements in your project β Download all site images for marketing or content reuse β Debug and fix inconsistent spacing, font sizes, and design issues β Learn and practice design systems from real websites β Speed up handoff between designers and developers πΉ Can I download images from websites? πΌ Yes! You can collect all images on a page and download them in a single ZIP file. πΉ Can I filter image downloads by file type? π Yes, filter by PNG, JPG, SVG, WebP, and more. πΉ Does it work with all websites? π Yes, it works on static pages, SPAs, and all modern websites. πΉ Can I use it offline? π΄ Basic features like CSS inspection work offline, but font and color analysis may require internet access. πΉ Will it slow down my browser? β‘ No, CSS Pully is lightweight and optimized for performance. πΉ Can I copy CSS styles? π Yes, one-click style copy is supported for any inspected element. Download CSS Pully now and unlock the ultimate toolkit for web design inspection. Instantly detect fonts, extract color palettes, analyze CSS properties, collect and download images, and improve your productivity across all design and development tasks. CSS Pully is the must-have Chrome extension for any designer, developer, or creative professional working on the web.
Element Inspector - Precision UI Analysis
Professional UI inspection toolkit for developers. Analyze element alignment, colors, spacing, and typography with precision. Element Inspector is a comprehensive UI analysis toolkit designed for developers, designers, and QA professionals. This extension provides precision tools for analyzing web page elements with professional-grade accuracy. (π You asked, we delivered! Hover, copy, and paste directly into Notepad, text editors, or any file. Available now!) βββββ Like using Element Inspector? Please consider leaving us a rating! It makes a huge difference and truly helps us out. βββββ π Key Features: π― Dimensions Tool - Precise width, height, and position measurements π¨ Color Picker - Extract exact colors, gradients, and transparency values π Position Analysis - Check alignment, distances, and positioning π Spacing Inspector - Analyze margins, padding, and border properties π² Static Grid - Overlay grid lines for perfect alignment verification π Instant Copy - Press Ctrl+C/Cmd+C on hover to copy inspection data instantly -Streamlined workflow for UI/UX designers -Accurate measurements for front-end developers -Quality assurance for visual testing -Modern, intuitive interface with instant feedback -Works on any webpage without affecting performance -Zero performance impact - tools activate only when needed -No data collection or tracking -Operates entirely locally in your browser -No external server connections -GDPR and CCPA compliant -Complete transparency in operation πΌ Perfect for: -Responsive design testing and validation -UI component analysis and debugging -Design system validation and compliance -Cross-browser compatibility checks -Client presentation and documentation -QA testing and visual regression testing -All 5 core analysis tools included -Unlimited usage on any website -No registration or premium features required -Complete functionality during inception phase -Perfect for individual developers, design teams, QA professionals, and enterprise development workflows. Discover our complete suite of productivity tools - also accessible directly from the extension: π― TestShot by RDG - "Taking Evidence Has Now Become Easy." Simplify the process of capturing and documenting evidence for testing and documentation. https://testshot.io ποΈ Instant Compress - Making file compression free, simple, private and 100% secure Compress, resize, crop, and edit your images instantly with all processing happening securely in your browser. https://testshot.io/instantcompress π DataLens - Smart Data Filtering Made Simple Upload your Excel/CSV once, filter any column in seconds from any device at zero cost. https://testshot.io/datalens/home.php All tools are easily accessible through the "Explore More Tools" section within Element Inspector. π Release v2.1.0 β Clipboard Copy & Stabilityπ ---------------------------------------------------------------------- β‘οΈ Copy Element Data Instantly As requested, this feature is now available! Press Ctrl+C (or Cmd+C on Mac) while hovering any element to copy its inspection data directly to your clipboard β no extra clicks needed. You can then easily paste (Ctrl+V / Cmd+V) the copied data directly into Notepad, text editors, or any other files. βοΈ Configure What Gets Copied Open the gear menu to set your copy preferences. Choose exactly which data fields are included when you copy, so your clipboard always has what you need. β Visual Copy Confirmation Copied fields stay highlighted in the tooltip so you always know which element's data is on your clipboard β even as you keep inspecting. π οΈ Stability Improvements Fixed multiple reliability issues in the clipboard pipeline and message handling that could cause silent failures. Copy now works consistently across all pages and tab states.
CSS Scanner Pro
The fastest and easiest way to inspect, copy and analyze CSS styles on any webpage Inspect, copy, and analyze CSS styles on any webpage instantly with CSS Scanner Pro β the ultimate tool for web developers and designers. Instant CSS Inspection Hover over any element to see its complete CSS styles with beautiful syntax highlighting. One-Click Copy Copy CSS, HTML, or both to your clipboard instantly. No manual selection needed. Include Children CSS Extract nested component CSS with one click. Get complete UI components with all their styles. Live CSS Editor Edit and apply styles in real-time. See changes instantly without leaving the page. CodePen & JSFiddle Export Export any component to CodePen or JSFiddle with one click. Perfect for sharing and prototyping. SCSS Export Convert CSS to nested SCSS with auto-generated variables. Copy to clipboard in one click. CSS Variable Inspection See custom properties defined on elements and their resolved values. Track variable inheritance. Specificity Calculator View selector specificity weights in the Source tab. Understand which rules take priority. Animation & Transition Inspector View transitions, animations, and @keyframes rules applied to any element. Box Model Visualization See margin, border, padding, and content dimensions in a visual diagram. Color Palette Extraction Detect all colors used on an element. Click any swatch to copy the color value. Light & Dark Theme Switch the inspector between dark and light themes to match your preference. Optimized Output Clean, compressed CSS with shorthand properties. No bloat, just what you need. Grid Overlay Toggle a visual grid overlay to inspect layouts and alignment. Pin Inspector Mode Freeze the inspector to examine elements without moving your mouse. Parent Element Scanner Navigate up the DOM tree to inspect parent elements easily. Responsive Breakpoint Indicator See the current viewport breakpoint (xs/sm/md/lg/xl/xxl) in the inspector header. Media query badges in the Source tab show which @media rules are active or inactive. Enhanced Keyboard Navigation Switch tabs with number keys (1-4), navigate siblings with Left/Right arrows, quick copy with Ctrl+C, and cycle through CSS sections with Tab/Shift+Tab. Performance Optimized Smooth inspection powered by requestAnimationFrame throttling, stylesheet caching, lazy tab updates, and computed style caching. Multi-language Support Available in English, French, Spanish, German, Portuguese, and Japanese. PERFECT FOR - No data collection - No external servers - No tracking or analytics - Works completely offline - All processing happens locally in your browser 1. Click the extension icon or press Ctrl+Shift+S / Cmd+Shift+S 2. Hover over any element on the page 3. View CSS in the inspector panel 4. Click "Copy" to copy styles 5. Use the Editor tab for live changes 6. Export to CodePen or JSFiddle if needed - CSS Tab: View all computed CSS properties, variables, animations, box model, and colors - HTML Tab: See the element's HTML structure - Source Tab: View original stylesheet rules with specificity badges - Editor Tab: Edit and apply CSS in real-time - Choose selector mode (smart, original, none) - Include/exclude child elements - Copy options (CSS only, HTML only, both) - Grid overlay preferences - Light or dark inspector theme - Language selection - And more...
getFont
Extract, preview, and download fonts from any website with getFont - the ultimate font extraction tool for designers, developers, and typography enthusiasts. β’ Automatic Font Detection - Instantly scans and identifies all custom web fonts on any page β’ Format Conversion - Convert fonts between TTF, OTF, WOFF, and WOFF2 formats seamlessly β’ Live Preview - Preview each font with customizable sample text before downloading β’ Individual & Batch Downloads - Download fonts one by one or all at once as a ZIP file β’ Smart Search & Filter - Quickly find fonts by name, format, weight, or style β’ Export Options - Export font data as JSON, CSV, Markdown, or copy CSS code β’ Font Pairing Suggestions - Get intelligent pairing recommendations for your fonts β’ Dark Mode - Easy on the eyes with beautiful dark theme option β’ Customizable Preferences - Control preview text, size, and display options β’ Clean Modern UI - Minimal, intuitive interface with smooth animations β’ Privacy-Focused - No data collection, works completely offline β’ Fast & Lightweight - Minimal performance impact on browsing 1. Visit any website with custom fonts (Google Fonts, Adobe Fonts, or any site with typography) 2. Click the getFont icon in your browser toolbar 3. Browse the automatically detected fonts with previews 4. Download individual fonts or batch download as ZIP 5. Convert to your preferred format with one click π¨ PERFECT FOR β’ Web Designers - Extract fonts from inspiration websites β’ Developers - Identify and download fonts for projects β’ Font Enthusiasts - Discover and collect unique typefaces β’ Researchers - Study typography and font usage patterns β’ Students - Learn about web fonts and design β’ Built with Manifest V3 (latest Chrome extension standard) β’ Advanced font parsing using OpenType.js β’ WOFF/WOFF2 decompression and conversion β’ Cross-format compatibility β’ Batch operations with JSZip β’ Persistent preferences with localStorage β’ JSON - Structured font data for developers β’ CSV - Spreadsheet-compatible format β’ Markdown - Documentation-ready format β’ CSS - Copy @font-face rules directly Legal Use: Fonts are intellectual property. Only download fonts you have the right to use. Check font licenses before commercial use. This tool is for educational and personal use. Limitations: Some fonts may be protected by CORS policies or website restrictions. Dynamic fonts loaded after page load require a refresh click. β’ No data collection or tracking β’ No external servers or APIs β’ All processing happens locally β’ No permissions beyond active tab access β’ Open source and transparent β Find and download fonts from inspirational websites β Identify typography used in web designs β Convert fonts to formats compatible with your projects β Build a personal font library β Study web typography and font implementation β Back up fonts for offline use β Compare fonts across multiple websites Unlike other font extractors, getFont offers: β’ Advanced format conversion capabilities β’ Clean, modern interface with excellent UX β’ Multiple download and export options β’ Font pairing suggestions β’ Customizable preferences that persist β’ Active development and support β’ No ads, no tracking, no nonsense Whether you're a professional designer sourcing fonts for a project, a developer learning about web typography, or a font enthusiast building your collection, getFont makes font extraction simple, fast, and reliable. Download getFont today and unlock the typography of the web! TIPS FOR BEST RESULTS β’ Click refresh if fonts don't appear immediately β’ Enable preview text to see how fonts look β’ Use search to quickly find specific font families β’ Export font data for documentation β’ Check font licenses before commercial use Found a bug or have a suggestion? We'd love to hear from you! Check our support page or documentation for help. Remember: Always respect font licenses and copyright laws. π¨β¨
View CSS
A Chrome extension to view the CSS of any website. CSSViewer is a lightweight and user-friendly Chrome extension designed to help you inspect, analyze, and view the CSS used on any website with a single click. Whether you're a developer, designer, or simply someone curious about how a website's styling is built, CSSViewer is the perfect tool to understand the structure and details of CSS properties directly in your browser. Key Features: Check CSS used on a website: With CSSViewer, you can easily explore all the CSS properties applied to the current webpage. Extract CSS from all elements and discover how websites are styled. Categorized CSS Output: CSSViewer provides a clear breakdown of CSS properties by categories such as Font & Text, Color & Background, Box (margin, padding, etc.), Positioning, and Lists. This makes it easy to navigate through large stylesheets and focus on the specific CSS rules you're interested in. Copy and Download CSS: Want to use or analyze the CSS youβve just inspected? CSSViewer allows you to copy the CSS directly to your clipboard or download it as a CSS file for offline analysis or further customization. Instant Results: With a click of a button, you can view all the stylesheets and CSS rules used on any website. CSSViewer instantly extracts the CSS code for you, making it ideal for quick inspections. Perfect for Developers and Designers: Whether you're designing your own website or learning how popular websites are styled, CSSViewer simplifies the process by giving you access to the full list of CSS properties applied to a page, categorized for easy inspection. View and Compare Styling: Use CSSViewer to compare the CSS styles between different websites, understand media queries, and inspect CSS frameworks or custom styling solutions that websites are using. How It Works: Install CSSViewer from the Chrome Web Store. Visit any webpage, click on the CSSViewer extension icon, and hit "View CSS". The extension will extract all the CSS properties applied to the page, categorize them (Font, Colors, Box Model, Positioning, etc.), and display them in a clean, scrollable popup. Copy the CSS or download it for later use with one click! Who Is This Extension For? Web Developers: Quickly view and extract the CSS of any webpage to better understand how different styles are applied. Perfect for debugging and learning CSS structure. Web Designers: Analyze the font sizes, colors, and box model properties used on a page to gain inspiration for your own designs or to ensure design consistency across different web pages. Students & Learners: If youβre learning web development and want to see how real-world websites are built, CSSViewer helps you inspect and understand CSS properties and frameworks being used. Why CSSViewer? Simplicity & Ease of Use: With its intuitive interface, CSSViewer doesnβt require any special technical skills. A single click is all it takes to access the CSS styles applied to the current webpage. Categorized CSS for Better Clarity: CSSViewer separates styles into categories like Font & Text, Color & Background, Box Model, Positioning, and List Styles, making it easier to focus on specific properties without getting overwhelmed. Advanced CSS Insights: Whether you are dealing with complex media queries, responsive design, or understanding various CSS frameworks, CSSViewer helps you access and learn from any CSS code. Copy or Download CSS in Seconds: Export the CSS to reuse in your own projects or for further analysis, with convenient copy and download options directly in the popup.
