Stop switching.
Build faster.
Ship smarter.
Web SuperKit brings 100+ developer and design tools directly into your browser. Inspect, tweak, generate, and export — without leaving the page.
- Lightweight — under 1MB, zero slowdown
- 100+ tools across 10+ categories
- Free forever + 40 premium tools
- Works on any website, instantly
From install to insight in seconds
Zero configuration. Just install and start building.
Install in Seconds
Add Web SuperKit from the Chrome Web Store. One click, no signup required. Ready in under 10 seconds.
Open on Any Page
Click the WSK icon on any website. The dock panel appears instantly — no page reload, no navigation away.
Use 100+ Tools
Pick any tool from the dock. Inspect elements, generate CSS, extract colors, analyze fonts — all in real time.
Copy & Export
One-click copy of generated CSS, colors, or values. Export designs, palettes, and more in multiple formats.
One extension for everything
Replace your entire toolkit with a single, lightweight Chrome extension. Save time, reduce context switching, build better.
Stop opening DevTools, Figma, and 10 other tabs
Color, CSS, fonts, code, text, network, and more
Blazing fast load — zero performance impact
Advanced tools for pros — one affordable plan
Used by developers at Stripe, Vercel, Figma and thousands more.
Everything you need, always at hand
100+ tools across 10+ categories. From quick color grabs to deep CSS generation — no tab switching, no page reloads.
Color Picker
Pick any color from the page. Get HEX, RGB, HSL, and OKLCH values instantly.
Contrast Checker
WCAG AA/AAA accessibility contrast ratios for any color combination.
Element Inspector
Deep-inspect any DOM element. See computed styles, box model, and inheritance.
Box Shadow Generator
Build complex box shadows visually with live CSS output and one-click copy.
Font Extractor
Detect all fonts used on a page. Get Google Fonts embed links instantly.
SQL Formatter
Format and prettify SQL queries with syntax highlighting and indentation.
Palette Generator
Generate harmonious color palettes from any base color. Export as Tailwind or CSS vars.
Flexbox Generator
Build and visualize flexbox layouts interactively with live code output.
Image Replacer
Swap any image on the page with another URL or uploaded file — without editing code.
Screenshot Editor
Capture page sections and annotate them with arrows, text, and highlights.
Spacing Ruler
Measure pixel distances between any elements directly on the page.
CSS Variable Extractor
Extract all CSS custom properties from any page. Copy as JSON or CSS.
And 88+ more tools waiting for you inside the extension.
Every category, covered
From color theory to developer utilities — Web SuperKit covers the full stack of browser tools.PRO = Premium
Color Tools
Extract, convert, generate, and check colors with WCAG-ready tools.
CSS Tools
Generate, minify, and visualize CSS — from shadows to animations.
Code & DOM Tools
Inspect, edit, and manipulate any element directly on the page.
Font & Typography
Detect, extract, and scale typography from any website.
Developer Utilities
Cheatsheets, formatters, and generators for everyday dev tasks.
Measurement Tools
Measure distances, breakpoints, and grid alignment directly on screen.
Web & Network
Analyze page resources, headers, and performance insights.
Text & String Tools
Transform, encode, and analyze text with precision.
Stop switching tools.
Use one.
Web SuperKit replaces your color tools, element inspectors, CSS generators, typography tools, and developer utilities — all in one lightweight extension.