Browser Extension

Inspect CSS like a pro

A professional CSS inspector and editor for Chrome, Firefox, and Edge. Analyze rules, edit styles in real-time, detect fonts, extract colors, and much more.

Install Free View Pro Features

Also available for

Chrome

Firefox

Edge

Free tier includes Styles + Layout tabs. Pro unlocks all 8 tabs.

Instant Inspection Understand any element in one click.

Pixel Perfect Measure spacing, size, and layout precisely.

Developer First Built for engineers and designers alike.

Features

Everything you need to work with CSS

From quick property edits to deep specificity analysis, Aperture CSS covers the full workflow.

Real-Time Style Editing

Click any CSS value to edit it live. Changes apply instantly with full undo support. Includes numeric scrubbing with arrow keys.

Applied CSS Rules PRO

See every CSS rule that applies to an element, grouped by stylesheet. Overridden properties are visually struck through.

Specificity Analysis PRO

Visualize selector specificity with bar charts. Instantly identify conflicting rules and understand cascade order.

Box Model & Layout

Interactive box model visualization with editable margin, padding, border, and content dimensions.

Color Palette PRO

Extract every color used on the page. Full color picker with HEX, RGB, HSL, and HWB support plus eyedropper tool.

Font Detection PRO

Identify fonts in use, see the full font stack, weights, sizes, and line heights. Find out exactly which font file is rendering.

Asset Extraction PRO

Browse all images, SVGs, and background images on the page. Preview, copy URLs, or download in one click.

Computed Styles PRO

Search and filter all computed styles for the selected element. See the final resolved value for every CSS property.

DOM Navigator

Visual DOM tree with search, virtual scrolling, and click-to-select. Navigate complex DOMs with ease.

Pseudo-State Forcing

Force :hover, :active, :focus, :visited, and :focus-within states on any element to inspect their styles.

Zero Dependencies

Built entirely with vanilla JavaScript. No frameworks, no bloat. Lightweight, fast, and has zero impact on page performance.

Element Pinning

Pin your selection to keep inspecting while interacting with the page. Navigate to parents/children with keyboard shortcuts.

Pricing

Start free, go Pro when you're ready

The free tier is fully functional for basic CSS inspection. Upgrade to unlock every tab.

Free

For quick CSS checks

Free forever

✓ Real-time style editing
✓ Box model & layout
✓ DOM navigator
✓ Pseudo-state forcing
✓ Element pinning
— Applied CSS rules
— Computed styles
— Specificity analysis
— Color palette & picker
— Font detection
— Asset extraction

Install Free

Tab	Free	Pro
Styles (live editing)	✓	✓
Layout (box model)	✓	✓
Rules (applied CSS)	—	✓
Computed (all styles)	—	✓
Specificity (analysis)	—	✓
Colors (palette)	—	✓
Type (fonts)	—	✓
Assets (images)	—	✓

Frequently asked questions

How do I activate my Pro license?

After purchasing, you'll receive a license key by email. Click the Aperture CSS extension icon, paste the key in the License section, and click Activate. That's it.

How many devices can I use?

Each Pro license can be activated on up to 3 devices. You can deactivate from one device and reactivate on another at any time.

Is it a subscription or one-time?

One-time payment. Pay once, use it forever. All future updates included.

What if I need a refund?

We offer a 14-day money-back guarantee. Request a refund directly from your LemonSqueezy order page — no need to email us.

Does it work offline?

Yes. After initial activation, your Pro status is cached locally. It works offline for up to 7 days before needing to re-validate.

Does it affect page performance?

No. Aperture CSS uses zero runtime dependencies and only activates when you toggle it on. It has negligible impact on page load or rendering.