Veelo — Design Inspector for Developers & Designers

About

Veelo is a lightweight design inspector that lives in your browser. Hover over any element on any webpage to instantly extract typography, colors, contrast ratios, gradients, shadows, and production-ready CSS — no DevTools required.

🔤 FONT INSPECTOR
Instantly see font family, size, weight, line height, and letter spacing for any text element. No more guessing what typeface a site uses.
🎨 COLOR GRABBER
Extract exact hex, RGB, and HSL values for both text and background colors. One-click copy to clipboard.
WCAG CONTRAST CHECKER
Automatically calculates the contrast ratio between text and background. Shows AA and AAA pass/fail badges so you can ensure accessibility compliance.
🌈 GRADIENT DETECTOR
Identifies CSS gradients on any element and displays the full gradient value. Copy the complete gradient declaration with one click.
📋 CSS SNIPPET EXPORTER
Generates a clean, copy-ready CSS snippet combining all detected properties — typography, colors, backgrounds, shadows, and border-radius.
🖼️ IMAGE INFO OVERLAY
Hover over images to see rendered size vs. natural resolution, file type, and source URL. Perfect for auditing image optimization.

WHY VEELO?

✦ Zero setup — install and start inspecting
✦ Non-intrusive side panel — doesn't break page layout
✦ Pin any element for detailed analysis
✦ One-click copy for every value
✦ Keyboard shortcut (Ctrl+Shift+V / Cmd+Shift+V) to toggle
✦ Works on any website
✦ No data collection — 100% client-side

PERFECT FOR:
• Frontend developers extracting design specs
• UI/UX designers auditing live websites
• Accessibility engineers checking WCAG compliance
• QA testers verifying design implementation
• Students learning CSS and web design

Veelo respects your privacy. It runs entirely in your browser, collects zero data, and requires only the minimum permissions needed to inspect page styles.