Yes. Inspecting, measuring, the eyedropper, font details, the box model, outline overlays and link previews are free forever. Canvas Eye Pro is a one-time purchase, and you can try every Pro tool free for 7 days.

How do I open Canvas Eye?

Press Option-Shift-C on any page, click the Canvas Eye toolbar button, or right-click an element and choose Inspect with Canvas Eye.

Does Canvas Eye change the page or slow it down?

No. It only runs on pages where you open it, draws its overlays in an isolated layer, and closing it leaves the page exactly as it was.

Does Canvas Eye collect any data?

No. Everything runs on your Mac. Canvas Eye never sends page content anywhere, has no account and no analytics.

Canvas Eye — Design Inspector for Safari: Measure, Colors, Fonts & Clean CSS

Canvas Eye:
The Design Inspector Safari Never Had.

Measure the distance between any two elements, pick any pixel's color, see the font that actually renders, copy clean CSS or Tailwind, and export a site's design tokens. Every tool in one floating toolbar, one keystroke away.

Press ⌥⇧C on any page to start inspecting.

straighten

Inspect & Measure

Hover for the box model. Click to pin, hold ⌥ and hover another element to see the distance, like Figma. Arrow keys walk the DOM; a free ruler and guides snap to edges.

colorize

Color

A magnifying eyedropper for any pixel, element colors, WCAG 2.2 and APCA contrast, the page palette by role, gradients and near-duplicate detection. HEX, RGB, HSL or OKLCH.

text_fields

Fonts

The font that actually renders (not just the font stack), where it comes from, weights, sizes and variable axes. Plus the page's full font inventory and real type scale.

code

Clean CSS

Copy an element's styles without browser defaults or inherited noise, with shorthands collapsed and the CSS variable behind each value. As CSS, Tailwind classes or a React style object.

grid_on

Layout Overlays

Outline every element, column and baseline grids, spacing, flex and grid tracks, the overflow finder for horizontal scroll, a z-index stacking map and the active breakpoint.

data_object

Design Tokens

Extract a live site's colors, type, spacing, radii and shadows. Rename, merge and delete, then export CSS variables, JSON, Tailwind v4/v3, W3C design tokens or SCSS.

layers

Mockup Overlay

Drop in your design, set opacity or difference blend, nudge it pixel by pixel and highlight everything that doesn't match.

accessibility_new

Accessibility

Contrast failures with suggested fixes, heading outline, tab order, missing labels and alt text, landmarks, and color-vision simulations.

travel_explore

Assets, Meta & SEO

Every image, SVG and icon with ZIP download. Tags, JSON-LD and link previews for iMessage, X, LinkedIn, Slack and Facebook.

How Canvas Eye works

Canvas Eye is a Safari extension for front-end developers, designers and accessibility reviewers. Press ⌥⇧C, click the toolbar button, or right-click an element to open a floating toolbar on the current page. Hover to see sizes and spacing, click to pin an element and read its clean CSS, hold Option to measure distances, and switch tools with single keys: C for color, F for fonts, L for layout, T for tokens. Overlays are drawn in an isolated layer, so the page's layout never shifts, and closing Canvas Eye leaves the page exactly as it was. Nothing leaves your Mac.