CSS Tweaker, start to finish

Installing

CSS Tweaker is not on the Chrome Web Store yet. You install the packaged build directly, which takes about thirty seconds.

1. Unzip the file you received after checkout.
2. Open chrome://extensions in your browser.
3. Turn on Developer mode using the toggle in the top-right corner.
4. Click Load unpacked and select the unzipped folder.
5. Pin CSS Tweaker to your toolbar by clicking the puzzle-piece icon and pinning it from the list.

Works in Chrome, Edge, Brave, Arc, and any other Chromium-based browser.

Picking an element

Click the CSS Tweaker icon in your toolbar to open the panel on any page. The panel mounts inside a Shadow DOM so it does not interfere with the page's own styles.

With the panel open, hover over any part of the page to see elements highlighted. When you find the one you want, click to lock onto it. The picker works through deep component trees, not just the outermost visible layer, so you can reach nested buttons, labels, and inner wrappers without difficulty.

Tweaking

Once an element is selected, the panel shows controls grouped by category: colours, typography, sizing, spacing, borders, shadows, and more. Around a hundred CSS properties in total. You drag sliders, open a colour picker, or choose from a font list, and the page updates as you go.

You are not limited to the element's default state. CSS Tweaker lets you edit hover and active states too. Switch to a state using the tabs at the top of the controls, make your changes, and switch back.

Your edits save locally, tied to the page's URL. If you reload, CSS Tweaker reapplies them automatically, even after a React or Next.js hydration pass.

The AI handoff export

When you are done making changes, click Export handoff in the panel. This produces a structured brief that lists every change you made, with:

• The CSS selector and DOM path for the element
• The property, the original value, and the new value
• Any intent notes you typed alongside the change

Paste the brief into Claude, Cursor, Copilot, or your editor's AI chat. It has enough context to find the relevant rules in your source files and apply the changes without guessing.

The export panel also gives you a raw CSS block if you prefer to apply changes by hand, and a Markdown checklist you can drop into a PR description or a Notion doc.

Troubleshooting

• The panel does not appear when I click the icon. Reload the tab and try again. Some pages with strict Content Security Policies can block the panel on first load.
• My edits do not persist after a reload. CSS Tweaker stores edits by exact URL. If the page appends a query string or hash on each load, the URL will differ each time and the saved edits will not match. Try on a stable URL.
• A change looks wrong in the export. Re-select the element by clicking it in the panel's element tree, make the change again, and re-export. This resets the before value to the current computed style.
• The extension disappeared from my toolbar. It is still installed. Click the puzzle-piece icon in Chrome and pin it again.

FAQ