The CSS inspector
Firefox has been missing.
PeekCSS is a Firefox-native CSS inspector. Hover any element to read its styles, pull full color palettes and fonts from a page, and export production-ready tokens — without ever opening DevTools.
No account needed to start. Pro unlocks palettes, exports & assets.
Inspect any element without opening DevTools.
CSS Peeper is Chrome-only and has said no to Firefox for years. PeekCSS fills that gap — a native sidebar inspector that reads computed styles, extracts palettes and fonts, and exports production-ready tokens, all without the DevTools rabbit hole.
Hover, click, read the CSS.
A pixel-accurate overlay follows your cursor. Click any element to load its full computed CSS into the sidebar — grouped and copyable.
- Smart hover targeting. Empty containers resolve down to the nearest visible child, so you always land on what you meant.
- Grouped properties. Typography, Colors, Spacing, Effects and Layout — with one-click copy for a value, a group, or everything.
- Contrast built in. Every color pair shows its ratio with an AA / AAA pass-fail badge.
- Your units. HEX / RGB / HSL and px / rem / pt, applied everywhere from Settings.
The whole page's design, at a glance.
Pull every color and image off a page in one pass. See how each color is actually used, then export the palette in the format your codebase speaks.
- Palette extraction. Up to 120 deduplicated colors, each tallied by text / background / border usage.
- Export anywhere (Pro). CSS custom properties, SCSS variables, a JSON object, or a Tailwind colors config.
- Image grid + download. Every <img> and CSS background image with thumbnails; grab one or download all as a ZIP (Pro).
- Accessibility score. Estimated share of text passing AA/AAA, plus a list of failing pairs.
Every font on the page, sorted.
See each font family, how often it's used, its weights and sizes, and the roles it plays — then get pairing suggestions without sending a single byte about the page anywhere.
- Usage-ranked font list. Families sorted by element count, with distinct weights and sizes per family.
- Role breakdown. Headings / Body / UI / Other chips, with a sort-by-role toggle.
- Privacy-first pairing (Pro). Uses Google Fonts’ public catalog after you grant access. Detected fonts never leave your machine.
Turn inspection into finished output.
The Ultimate tier adds AI on top of every Pro feature — naming, cleanup, and generation, with a generous monthly quota and per-action opt-in.
- Semantic color naming. Get human-readable token names and a clean export, not just hex codes.
- CSS cleanup on export. Redundant declarations collapsed, values normalized as you export.
- Recreate this component. Generate clean markup + CSS from any inspected element.
- Accessibility fixes. Concrete suggestions to push failing contrast pairs over the line.
Keyboard-first, always.
Start inspecting in Firefox today.
Free forever for everyday use. Upgrade any time — one click, handled by Paddle.