CodingBunny CSS Inspector
Inspect any element of your site from the frontend and copy its CSS, hover and focus states, variables and sources in one click.
Solid choice
CodingBunny CSS Inspector is a solid plugin choice in 2026, with a few things worth checking first. Was last updated 2 weeks ago, and scores 64/100 on our health check.
- Actively developed — last update 2 weeks ago
- Tested with the latest WordPress (7.1)
- Small user base (<10 active installs)
- Very few reviews so far
How does it stack up?
Side-by-side on installs, updates, ratings & support
Daily downloads
Download spikes usually follow a new release — each site that auto-updates counts as a download.
Rankings
Where CodingBunny CSS Inspector stands todayWordPress.org search rankings
Live position in the plugin search, top 100| Keyword | Position |
|---|---|
| css | >100 |
| design | >100 |
| devtools | #23 |
| Frontend | >100 |
| inspector | #72 |
About CodingBunny CSS Inspector
From the official readme · v1.1.0Description
CodingBunny CSS Inspector adds a DevTools-style panel to the frontend of your site. Hover any element to see its CSS, click to lock it and copy exactly what you need, without opening the browser developer tools.
It is ideal for customizing a theme, overriding a page builder style or understanding where a rule comes from.
What you can inspect
- The CSS of any element, cleaned of default values and ready to paste
- Hover, focus, focus-visible, focus-within and active states, read from your real stylesheets
- The ::before and ::after pseudo-elements
- The CSS variables used by the element and their current values
- The stylesheets that style the element: theme, plugin, WordPress core, generated files and inline styles, with the selectors that match
- A clickable breadcrumb of parent elements, with a short or full selector path
Made for daily use
- Open it from the admin bar or with Alt+Shift+C
- Copy selectors and CSS blocks in one click
- Dock the panel on the left or on the right and resize it
- Colors shown in HEX with a preview swatch
- The panel is isolated from your theme, so its styles never break the inspector and vice versa
- Visible only to administrators and never loaded for visitors or in the dashboard
Installation
- Install the plugin from Plugins > Add New, or upload the
coding-bunny-css-inspectorfolder to/wp-content/plugins/. - Activate the plugin.
- Open any page of your site while logged in as an administrator and click “CSS Inspector” in the admin bar.
Frequently asked questions
How do I use it?
Hover an element to preview its CSS and click it to lock the selection. Press Esc or click the page to unlock, press Esc again to close the inspector. Click a parent in the breadcrumb to inspect it.
Who can use the inspector?
Only users who can manage options, which by default means administrators. Developers can change this with the codicsin_capability filter.
Will visitors ever see it?
No. The inspector and its files load only for logged-in users with permission.
Why are some states missing for an element?
States are read from the stylesheets of your site. Stylesheets loaded from another domain without CORS headers cannot be read by the browser, so their rules are not shown.
Changelog
1.1.0 – 2026-10-02
- New: Real hover, focus, focus-visible, focus-within and active states read from your stylesheets.
- New: ::before and ::after pseudo-elements.
- New: Sources now show the matching selectors and recognize WordPress core, generated files and named inline styles.
- New: Size label on the highlighted element.
- New: Dock the panel on the left or on the right.
- New: Alt+Shift+C keyboard shortcut.
- New: Copy selector button.
- Improvement: Redesigned panel in line with the other CodingBunny plugins.
- Improvement: The panel is isolated from the theme styles.
- Improvement: Copied CSS skips default values and keeps CSS variables.
- Improvement: Rules inside media queries and @supports are now detected.
- Improvement: Much faster hovering on pages with large stylesheets.
- Improvement: Interface is now translatable.
- Fix: The base CSS of a locked element included its hover styles.
- Fix: Breadcrumbs were empty while hovering.
- Fix: Semi-transparent colors lost their transparency when converted to HEX.
- Fix: Class names with special characters produced invalid selectors.
- Fix: The admin bar button could not close the inspector while inspecting.
- Fix: Content from the page could be interpreted as HTML in the panel.
- Fix: Super admins on multisite could not use the inspector.
1.0.2 – 2025-11-28
- Improvement: Added the ability to resize the width of the sidebar.
- Fix: Correct color preview in pseudo-classes.
1.0.1 – 2025-11-26
- Improvement: Improved sidebar structure.
- Improvement: Improved CSS coding.
1.0.0 – 2025-11-21
- New: Initial release.
Screenshots
For developers
Is this your plugin? Show off the numbers.
Add a live badge to your site, docs or GitHub README. It updates on its own — no account needed.
Best CodingBunny CSS Inspector alternatives
All css plugins →
FAQ
CodingBunny CSS Inspector: quick answers
Straight answers, pulled from live WordPress.org data.
Live data from WordPress.org · checked Oct 15, 2026
Is CodingBunny CSS Inspector free?
Yes. CodingBunny CSS Inspector is free to download and use from the official WordPress.org plugin directory.
Is CodingBunny CSS Inspector safe to use in 2026?
CodingBunny CSS Inspector is a solid plugin choice in 2026, with a few things worth checking first. Was last updated 2 weeks ago, and scores 64/100 on our health check.
How many websites use CodingBunny CSS Inspector?
CodingBunny CSS Inspector is active on <10 WordPress websites and has been downloaded 571 times since it launched in November 2025. It was downloaded 128 times in the last 30 days.
Does CodingBunny CSS Inspector work with WordPress 7.1?
Yes. The developer has tested CodingBunny CSS Inspector up to WordPress 7.1.3, the latest release. It requires WordPress 6.0 or newer.
What PHP version does CodingBunny CSS Inspector need?
CodingBunny CSS Inspector requires PHP 8.0 or higher. Most hosts run PHP 8.x today, so it works on any modern WordPress hosting.
When was CodingBunny CSS Inspector last updated?
The latest version, 1.1.0, was released on October 2, 2026 (2 weeks ago).
Who makes CodingBunny CSS Inspector?
CodingBunny CSS Inspector is developed and maintained by CodingBunny.
What are the best alternatives to CodingBunny CSS Inspector?
The most popular alternatives to CodingBunny CSS Inspector are WPCode (3M+ installs), Code Snippets (1M+ installs) and Simple Custom CSS Plugin (100K+ installs).
Powered by PageForge
Want thousands of pages that rank like these? Build them in an afternoon.
This directory runs on the same engine as PageForge. Turn any spreadsheet, CSV or API into thousands of fast, SEO-ready WordPress pages — with schema, internal links and AI-written copy baked in.
- CSV, Google Sheets & API data sources
- AI content, schema & internal links per page
- Works with Elementor, Gutenberg, Yoast & Rank Math
- Free on WordPress.org — no credit card
