Chrome Extension

Test CSS on any page without touching source code.

CSS Scratchpad is a lightweight Chrome extension that opens a floating style panel directly on the current webpage. Write CSS, pick an element, inspect its styles, and live-edit selected components without touching source code.

See Features Privacy Policy

Built for fast visual testing.

Use CSS Scratchpad when you want to test a style change, debug a layout issue, extract useful styles from a selected element, or live-edit a page component without changing app files.

⚡

Floating scratchpad

Click the extension icon to open a draggable panel directly on the active page.

🎯

Pick element to edit

Select a page element with a visual highlight and pull its useful styles into the scratchpad.

✍️

Live edit mode

Edit selected element styles and apply them directly, so common changes work without adding !important.

▾

Collapse or close

Keep the panel open while working, collapse it to the title bar, or close it with one click.

🛡

Protected panel UI

The scratchpad uses Shadow DOM, so the CSS you test on the page does not break the tool itself.

💾

Saved locally

Your scratchpad CSS is stored locally in the browser for reuse on the page.

Private by design.

CSS Scratchpad does not need accounts, servers, analytics, tracking, or personal data. The CSS you write stays local in your browser.

No tracking
No analytics
No remote servers
No personal data collection
CSS is applied only when you click Apply

About the author

CSS Scratchpad was created by Chris Ward as a simple tool for developers and designers who want a faster way to test page styling directly in the browser.

Illustration of Chris Ward working at a desk with a laptop, rocket, flowchart, and lightbulb.

Other works by the author: