CSS inspector for Safari on the Mac

StyleLift for Safari

Click the StyleLift button in the Safari toolbar, hover any element on any website and see its clean CSS. Click to copy it; Shift-click copies the whole component as HTML + CSS that renders at the same size.

StyleLift for Safari is an app on the Mac App Store with every feature included. It needs macOS and Safari 17 or later.

What it copies

• The CSS you’d have written yourself: browser defaults removed, shorthands merged, widths and grid templates as written (repeat(3, 1fr), not pixels).
• The element’s own :hover, :focus and :active rules, and its @media and @container variants.
• CSS variables kept as var(--name) with the value beside them, or plain values if you prefer.
• CSS rules, an inline style="" attribute or a React JSX style object, with colors as hex, rgb or hsl.
• A whole component (Shift-click or H) as HTML + CSS you can paste into CodePen or your own project.

See it run on the live demo, or read how to copy an element’s :hover and @media CSS.

Turn it on

1. Install StyleLift from the Mac App Store and open it once.
2. In Safari, choose Safari → Settings → Extensions and tick StyleLift.
3. Open any website and click the StyleLift button in the toolbar, or press ⌥ ⇧ C. When Safari asks, allow StyleLift on the sites you inspect.

Hover

Inspect any element

Click

Pin it and copy its CSS

⇧ + Click · H

Copy the whole component as HTML + CSS

C

Copy the CSS of the current element

↑ ↓ ← →

Parent · first child · previous · next

Esc

Unpin, then close the inspector

Safari’s own Web Inspector

Safari has a developer inspector built in, and it’s good to know both. To turn it on, choose Safari → Settings → Advanced and tick Show features for web developers (before Safari 17 this was “Show Develop menu in menu bar”). Then:

• Inspect an element: Control-click it and choose Inspect Element, or choose Develop → Show Web Inspector (⌥ ⌘ I).
• Copy one rule: in the Styles sidebar, click the small icon to the left of a rule’s selector and choose Copy Rule. Safari includes the @media around the rule, which Chrome and Firefox leave out.
• See a :hover rule: click Pseudo in the Styles sidebar and tick :hover, or Control-click the element in the DOM tree and use Forced Pseudo-Classes.

Web Inspector shows one rule at a time. StyleLift collects every rule for the element, its states and breakpoints, writes them as one block and copies it in a click. The guide How to copy CSS from a website compares the two ways step by step.

Help

The StyleLift button does nothing

Check that StyleLift is allowed on this website: Safari → Settings → Extensions. Wait for the page to finish loading and click again.

“StyleLift can’t run on this page”

Safari doesn’t let extensions run on its own pages, such as the Start Page, or inside its PDF viewer. Images and SVG files opened on their own aren’t web pages StyleLift can inspect.

The page blocks copying

Some sites forbid the clipboard. StyleLift then opens a tab of its own, which the site can’t see or change: press Copy there. If you closed that tab, press “Copy in a StyleLift tab” in the panel.

“Some styles come from another domain”

That domain doesn’t let other sites read its stylesheets, so no extension can. Sizes are measured instead, and :hover, @media and var() rules that live only there are missing.

Private by design. StyleLift runs on a page only after you click its button. No account, no tracking, no analytics, and no network requests at all: nothing you inspect leaves your Mac. See the privacy policy.

Contact: write to support@getstylelift.com with the page address and the element, and what you expected to copy.