01
Understand what you see.
Reveal the CSS, dimensions and typography behind any element.
1 month of Pro, freeInspect web design.
The Chrome extension for designers & developers
Inspect web design.
Right in Chrome.
Inspect website CSS, colors, fonts and spacing. Check layouts, run page QA and take screenshots with one Chrome extension.
Then $0.99/month. Cancel before the trial ends.
A closer look at your next ideaTry the Demo
CSS InspectorColor PickerTypographySpacingScreenshotsPage QA
MADE FOR THE DETAILS
A small toolkit. A big difference.
From the first color you notice to the final pixel you adjust. Four core tools stay free; explore every Pro tool with a 1-month trial.
02
Find your color story.
Collect a page’s palette, discover its fonts and check contrast.
03
Give every pixel a place.
Measure the gaps. Check the grid. Capture the result.
01
Hoverify Inspector
FreeHover over any element to instantly view Box Model, 6 Typography properties (font-family, size, weight, line-height, letter-spacing, color), Layout, Background, and accessibility info in real time.
02
Color Palette Extraction
ProAutomatically collects all colors used on a web page and categorizes them using a clustering algorithm.
03
Font Inspector
ProInstantly check 6 properties of any text element: font-family, size, weight, line-height, letter-spacing, and color.
04
WCAG Contrast Checker
ProCalculates foreground/background contrast ratios in real time using the WCAG 2.1 formula. Determines AA (4.5:1) and AAA (7:1) compliance levels.
05
Spacing Measurement
ProDisplays horizontal, vertical, and diagonal distances between two elements in pixels (px) with Figma-style red dashed lines.
06
CSS Copy
ProCopy an element's computed CSS to the clipboard with a single click. Range selection is also available.
07
Grid Overlay
FreeOverlay a 12-column CSS Grid to visually verify layout alignment.
08
Style Strip
ProProgressively removes CSS in 4 stages to analyze the underlying HTML structure.
09
Page QA
ProReview overflow, image descriptions, accessible names and heading order. Locate elements and export your report.
10
Palette to CSS
ProTurn an extracted palette into reusable CSS variables. Copy or download in one click.
Can you try PixelKit without installing?
Yes — experience PixelKit's core features right here, no extension installation required.
Good tools. A little price.
Keep the essentials free. Try all of Pro for a month, on us.
Free
$0Forever
Install for Free
- Hoverify Inspector
- Color Picker (5 history items)
- Grid Overlay
- Screenshot (visible area only)
Pro Monthly
1 month of Pro, free$0for your first month
Then $0.99/month. Cancel before the trial ends.
Start free trial- All Free features included
- Palette Extractor
- Font Inspector
- Spacing Measure
- WCAG Contrast Checker
- CSS Copy / Style Strip
- Visual Editor / Layout Editor
- Quick Theme / Presets
- Full API tools
- Page QA, heading outline & JSON reports
Pro Lifetime
$19.99One-time
Buy Pro
- All Pro features included
- Lifetime updates
- Priority support
The 1-month free trial is available on Pro Monthly. Payment details are required at checkout. Your subscription renews at $0.99/month unless you cancel before the trial ends. The $19.99 lifetime plan is a separate one-time purchase.
1
Start your Pro Monthly trial with Polar.
2
Find your license key in Polar or your email.
3
Paste the key into PixelKit to unlock Pro.
Frequently Asked Questions
What is PixelKit?+
PixelKit is a Chrome extension for analyzing and editing the visual design of web pages. It provides 8 tools including CSS inspection, color extraction, typography analysis, spacing measurement, and WCAG contrast checking.
How do you install PixelKit?+
Search for 'PixelKit' on the Chrome Web Store or click the install button on the landing page. It's ready to use immediately after installation.
Is PixelKit free?+
Four core tools are free forever: Hoverify Inspector, Color Picker, Grid Overlay and visible-area Screenshot. Pro Monthly starts with a 1-month free trial, then costs $0.99/month. Lifetime is $19.99.
How does the free trial work?+
Choose Pro Monthly in Polar to start a 1-month free trial, then activate your license key in the extension. Payment details are required. After the trial, it renews at $0.99/month unless you cancel in Polar before the trial ends. Lifetime is a separate $19.99 purchase.
How do I inspect CSS and fonts on a website?+
Install PixelKit from the Chrome Web Store and open a website. Use the toolbar inspector and hover over an element to see CSS and typography details. Pro adds dedicated font inspection and CSS copying.
Can I check a webpage for design issues before publishing?+
Pro Page QA checks horizontal overflow, missing image descriptions, failed image loads, unnamed inputs, buttons and links, and skipped heading levels. Locate each element and export a JSON report. These basic checks exclude iframes and shadow DOM and do not replace a full accessibility audit.
What additional features does the Pro plan include?+
Pro plan adds 9 tools: Palette Extractor, Font Inspector, Spacing Measure, WCAG Contrast Checker, CSS Copy, Style Strip, Visual/Layout Editor, Quick Theme, and Presets.
How does the WCAG contrast checker work?+
It calculates contrast ratios between foreground (text) and background colors in real time based on the WCAG 2.1 formula. It automatically determines AA (4.5:1 or higher) and AAA (7:1 or higher) compliance levels.
Can I use PixelKit on browsers other than Chrome?+
Yes, PixelKit can be installed and used on Chromium-based browsers such as Edge, Brave, and Arc via the Chrome Web Store.
1 month of Pro, free
Your next great idea starts here.
Make room for a better design workflow. Try every Pro tool for one month.
Start free trialThen $0.99/month. Cancel before the trial ends.