mbnbehikldjhnfehhnaidhjhoofhpehk
Inspect website styles in seconds. Supercharge your workflow, and save hours of work. CSS Peeper is the ultimate Chrome extension for designers and developers who want a seamless way to inspect and extract design properties from any website. Say goodbye to digging through complex code. CSS Peeper provides an intuitive, organized interface to access key design details. Professionals deserve tools that save time. Let CSS Peeper streamline your workflow and help you work smarter, not harder. Join 500,000+ professionals who are already making the most of their time. Supercharge your workflow with advanced design inspection features and save hours of work. No more digging in a code. 👉 Get CSS Peeper for Free! Install now and start inspecting websites in seconds. Visit https://csspeeper.com for more details. ✦ Inspect design properties effortlessly. Stop digging through the code. Save hours by quickly inspecting element properties with a simple point-and-click. ✦ Explore colors used on your favorite sites. Browse a variety of colors, find inspiration, and easily check contrast. Love a palette? Export it to your favorite design tool. ✦ Identify typography. Explore the typography across any site, uncover unique font pairings, and check the most relevant text properties. ✦ Explore assets. Browse and download all images, icons, and graphics used across a website. ✦ Instantly preview and copy the CSS of any element, turning great design into reusable code. ✦ Browse and explore the typography in use on any website. Preview the typography hierarchy to understand font choices, sizes, and styles, helping you design confidently and efficiently. ✦ Effortlessly identify typography instances and gain deeper insights into font style applications. Navigate to a dedicated screen to inspect each type of style with precision. ✦ Browse colors by semantic grouping including typography, background, border, and more. Identify colors in context to get more insights. ✦ Inspect individual color instances and explore their use cases, including value, category, class, and design token. ✦ Explore gradients color by color and preview every shade to recreate stunning visual effects with precision. ✦ Contrast scanner helps you stay aligned with the best accessibility practices. Instantly assess contrast issues, ensuring your websites are beautiful and accessible. ✦ Smart Inspector offers an advanced way to inspect design details at a glance. It provides deeper insights into design properties, including color contrast, shadows, and elevation effects. ✦ Switch to Sidebar Mode to gain full access to the website’s viewport. You can see the full list of available features at https://csspeeper.com/pricing By using the CSS Peeper extension, you agree to our Terms & Conditions (https://csspeeper.com/terms-and-conditions) and Privacy Policy (https://csspeeper.com/privacy-policy). CSS Peeper is proud to support Learn to Code, a nonprofit that supports our mission to help everyone become better coders. By using affiliate links, we invite you to help our mission when you are shopping at partner stores, at no cost to you. Support is always optional, and can be permanently disabled at any time.
SnipCSS
Extract the CSS/HTML for any element on any page, only take the styles you want SnipCSS extracts all CSS styles associated with any portion of a webpage. It works on all websites, and after a few clicks you get the CSS, HTML and Images associated with the section of the website you are trying to recreate. ANY COOL DESIGN YOU SEE ON THE WEB CAN BE YOUR PERSONAL TEMPLATE FOR QUICK PROTOTYPING! ======================================== If you tried to do the same by copying/pasting by hand it would probably take 20 minutes, but with SnipCSS you can select and get all styles including ones with media queries in under a minute. I even use it on sections of websites I created myself in other projects, so I can get a quick reusable HTML/CSS component to plug into my new project. Unlike other CSS extractor extensions that use "Computed Styles", SnipCSS uses the Chrome DevTools protocol. Just like when you use devtools you see a list of associated styles, SnipCSS reconstructs that list for each element in the subtree of the DOM snippet. All images, fonts and everything else needed for the design is downloaded, and you can easily export all the files into a zip file. PRO VERSION LAUNCHED! ======================================== Get CSS from multiple resolutions or multiple elements using the Pro Version! Also advanced features like no-conflict CSS classes, scoping, removing unnecessary attributes/classes, and creating a sub-selection of items have been added for Pro members. Version 1.7.0 adds the ability to turn your snippets into React/Vue templates by using ChatGPT. The template version of a snippet injects Lorem Ipsum data into the html so copyrighted images/text are automatically replaced. You can also use Stable Diffusion to replace images in the HTML. Generative AI features require a free SnipCSS account. TAILWIND CONVERSION! ======================================== Version 1.9.0 adds the ability to convert all HTML/CSS into valid Tailwind, including with media queries and pseudo selectors. Just visit SnipCSS.com and sign up if you're interested in unlocking these advanced features.
Amino: Live CSS Editor
Customize any website with your own CSS and see your changes instantly with Amino! Amino is a free CSS editor that lets you write and apply persistent CSS to any website. Use Amino to experiment with CSS in realtime, style your favorite websites, fix rendering issues—the applications are endless. Your CSS is stored in the cloud and is served every time you visit the page, making it effectively permanent as long as the extension is enabled. NEW FEATURE Guest mode: after many requests from users to be able to use amino without creating an account we've finally launched our Guest mode! It will work entirely locally with no need to create an account. If you want cloud storage you can simple create an account at anytime and enjoy the same great Amino experience sync'd across all your devices. Amino has previously been featured in: Chrome's ‘Top Picks’ in developer tool extensions, Smashing Magazine, Product Hunt, Designer News, Codrops, Sidebar, and more. FEATURES - Syntax highlighting - Automatic indenting and outdenting - Inspect tool - DevTools integration (*new*) - SCSS/Sass support - Autocomplete - Autosave - Data export - Multiple color schemes - Guest Mode USAGE TIERS - Guest & Free Cloud Tier - Free tiers are supported by ad displays in the sidebar/editor and cloud dashboard - Pro Cloud Tier - Remove ads - Access to collections - Unlimited Cloud Storage - Access to beta features BETA FEATURES (Pro Only) - AI Assistant to help write and understand your CSS rules For new feature announcements or just to say hello, please follow Amino on X: https://x.com/aminoeditor For more info or to sign up visit: https://amino.dev For frequently asked questions visit: https://amino.dev/faqs For documentation and guides on how to get the most out of Amino: https://docs.amino.dev For Amino's open source projects: https://github.com/aminoeditor By installing the extension or accessing the amino.dev website, you agree to Amino’s Privacy Policy (https://amino.dev/privacy) and Terms of Use (https://amino.dev/terms). TLDR: We care about user privacy, and we will never sell your data. To learn about the permissions this extension requests: https://amino.dev/permissions Thanks for giving Amino a try. If you like our product, please consider leaving us a review.
CSS Viewer for Google Chrome™
FREE! Quick and simple CSS property viewer. Want to view the CSS for a button/certain HTML element on the web page? You can do so quickly today once you install this extension. This CSS Viewer allows you to click on any button/image/text etc on a web page and you can instantly see the CSS code which was used. Its a quick and easy way to sort out the CSS code for a specific element on a website. Try using this CSS Viewer today to check out the CSS code being implemented on a website today. Disclaimer: Please note this extension is NOT made by Google and is made by an independent development team. All copyrights belong to their respective owners. Google doesn’t endorse or sponsor this extension. CSS Viewer for Google Chrome™ is not owned by, is not licensed by and is not a subsidiary of Google Inc.
CSS Used
Get all css rules used by the selected DOM and its descendants. One click to get all the css applied to the selected web element and its descendants. -- Recent Update -- 1. Migrated to Manifest V3. 2. Resources are read from local caches, making it much faster and solves the cross-origin issue. 3. Optimized style parsing in a more efficient way. 4. Dropped support for some outdated CSS, mostly -o- and -ms- prefixed properties. 5. Implemented a new UI powered by Svelte, with some visual tweaks. -- Known Limit -- 1. For CSS rules like ".wrap p{...}", if only " " is selected, the result ".wrap p{...}" will not apply to " ". Either change the rule to "p{...}" or add a ".wrap" parent in the final HTML. 2. CSS custom properties (variables) and all the style inherit related features are not supported currently.
