NudgeCSS Guide

Installing NudgeCSS

NudgeCSS is a Chrome extension. It takes about 30 seconds to install and requires no account or sign-up.

1. Click the Install Free button at the top of this page or go to the Chrome Web Store listing.
2. Click Add to Chrome on the store page.
3. When Chrome asks for permissions, click Add extension.
4. You will see the NudgeCSS icon appear in your Chrome toolbar. If you do not see it, click the puzzle piece icon in the toolbar and pin NudgeCSS.
5. Navigate to any website and click the NudgeCSS icon to open the editor panel.

You can also open and close the panel with a keyboard shortcut: Cmd + Shift + U on Mac, Ctrl + Shift + U on Windows. You can change this any time in chrome://extensions/shortcuts.

Picking an Element

Once the NudgeCSS panel is open, you can select any element on the page using these methods:

When an element is selected, it shows a colored outline on the page and its properties load in the editor panel on the right. The outline color tells you what kind of element you're looking at, so you can tell things apart at a glance before you even open the panel:

Editing Text Directly

Beyond changing how text looks, NudgeCSS lets you change the words themselves right on the page: fix a typo, tighten a headline, or add a sentence, without touching your site's code.

Double-click any text element (a heading, paragraph, span, list item, and similar) to start editing it in place. A dashed outline shows it is live-editable. Select some of the text to reveal a small toolbar with Bold, Italic, and Link.

Text edits show up in Undo, Reset Element, and Export Changes right alongside your CSS changes, so there is nothing separate to remember.

Typography Controls

The Typography group lets you adjust all text-related properties on the selected element.

• Font Family: Choose from system fonts or common web fonts.
• Font Size: Adjust with a slider or type a value directly. Supports px, rem, and em units.
• Font Weight: From thin (100) to black (900). Only weights supported by the font will apply.
• Line Height: Controls the space between lines of text.
• Letter Spacing: Adjusts the space between individual characters.
• Text Color: Opens a color picker with hex input and opacity control.
• Text Transform: Toggle between normal, uppercase, lowercase, and capitalize.
• Text Align: Left, center, right, or justify.

Appearance Controls

The Appearance group controls the visual styling of the element box itself.

• Background Color: Set a solid background color for the element.
• Border: Set border width, style (solid, dashed, dotted, and a few more), and color.
• Border Radius: Round the corners of the element. A high enough value turns a square into a circle.
• Opacity: Adjust the overall transparency of the element, from fully visible to fully invisible.

Hover Effects

NudgeCSS can edit what happens when someone's cursor rests on an element, like a button changing color when you point at it. This is a real hover effect, the same kind a developer would write by hand, so it works for every visitor after you export it, not just a preview inside the editor.

Select the element, open the Hover State group, and click Preview Hover. The element switches into its hover appearance right there in the panel, so you can style it without needing to hold your mouse over it the whole time. From there you can adjust its background, text color, border, and opacity while hovered, the same way you would its normal appearance.

Resizing and Spacing

Once something is selected, small square handles appear right on its outline on the page: one at each corner and one in the middle of each edge. Drag a corner to resize both width and height together, or drag an edge to resize just one direction.

In the panel, the Section Size group has the same controls as numbers you can type: Width, Height, Min Height, and Max Width. A Lock Ratio toggle keeps width and height scaling together, useful for images so they never look stretched. The Spacing diagram shows margin (the space around an element) and padding (the space inside it) as two nested boxes. Click any number on the diagram and type a new value.

To reposition an element rather than resize it, drag it directly on the page, or select it and nudge it with your keyboard: press an arrow key to move it 1 pixel, or hold Shift and press an arrow key to move it 10 pixels at a time.

Previewing Mobile and Tablet

Use the Desktop / Tablet / Mobile buttons at the top of the panel to see how your page looks at different screen sizes. This isn't a shrunk-down thumbnail: switching breakpoints reloads the page at that actual width, so your site's real responsive design responds exactly as it would for a visitor on that device.

Design Tokens

Many websites define a small set of reusable values, like a brand color or a standard corner radius, once and use them everywhere. NudgeCSS calls these design tokens. Click the Tokens button in the panel header to see every token the current page defines and edit them directly.

Changing a token updates every element on the page that uses it, all at once. It's the fastest way to test something like "what if our main color were a little darker" without hunting down every place that color appears.

While this list is open, click any element on the page and it jumps straight to the token that element uses and highlights it, so you don't have to scan a long list to find it. If a page defines more than a handful of tokens, a filter box appears at the top so you can type to narrow the list down.

Editing Every Button at Once

Select any single element and two buttons appear above its properties: Select All <tag> selects every element of that same type on the page (every link, every heading), and Select All .class selects everything sharing that specific class, a more precise match. Once selected, anything you change applies to all of them together, so you can restyle every button on the page in one pass instead of clicking each one by hand.

Adding New Elements

A small second window labeled Insert floats near the bottom of the screen whenever the editor is open. Select something on the page first, then use its three buttons to add a new element right after it:

• + Text: a new text block, ready to edit
• + Image: a placeholder image
• + Divider: a horizontal divider line

Whatever you add is selected automatically so you can start styling it right away. Everything you've added during the session is listed in the same window. Click an item to jump to it on the page, or click the × next to it to remove it. Only elements NudgeCSS added can be removed this way; nothing that was already on your page can be deleted.

Using the Layer Panel

Select a container (a section that holds other elements) and NudgeCSS shows a Layer Panel instead of jumping straight to properties, since a container usually isn't what you want to style directly. It is the fastest way to find and select nested elements that are difficult to click directly on the page.

Each layer has a small icon showing its type (text, image, button, container, or form field), using the same color coding as the outlines on the page. Clicking a layer selects that element and loads it in the editor. Click Edit Container if you want to style the container itself alongside its layer list.

The Back to Layers button appears after you drill into a child element, letting you return to the parent layer view.

Exporting Your CSS

NudgeCSS does not edit your live site files directly. Instead, it generates the CSS that represents your changes, which you copy and paste into your site's stylesheet.

When you are ready to export, click the Export button in the panel. Two options are available in the Basic tier:

• Copy CSS Patch: Copies the CSS for your current element's changes. Paste this into your site's stylesheet or a <style> tag.
• Copy for AI Agent: Copies the element's CSS context formatted for use with an AI assistant. See the section below for details.

Bridge+ users also have access to Download JSON, which exports all changes from the current session as a structured file.

Copy for AI Agent

Copy for AI Agent is a special export that packages the selected element's current styles and context into a prompt-ready format. When you paste it into Claude, ChatGPT, or another AI assistant, the AI has exactly what it needs to understand the element and suggest or apply further changes.

This is useful when you have made some visual changes with NudgeCSS and want the AI to take it further, or when you want to describe a change in plain language and have the AI write the exact CSS for you.

To use it:

1. Select the element you want to work on.
2. Click Export, then choose Copy for AI Agent.
3. Open your AI assistant of choice and paste the copied text.
4. Add your request in plain language, for example: "Make the heading larger and change the color to dark navy."

NudgeCSS Bridge

NudgeCSS Bridge lets NudgeCSS and an AI assistant work together directly, in either direction, without you copying and pasting anything in between. This is a Bridge+ feature.

An AI browser assistant can drive NudgeCSS for you. If you use a browser extension like Claude in Chrome, just ask it to make the change using NudgeCSS, for example "Using NudgeCSS, make the heading red." It will select the element and apply the change itself, the same as if you had clicked through the panel by hand.

NudgeCSS can also hand a change to Claude Code automatically. If you're already working with Claude Code on your site's real files, and one small visual tweak is faster to make by eye than to describe in words, edit it in NudgeCSS as usual, then send it over with one click instead of exporting and pasting.

To send a change to Claude Code:

1. Make sure Claude Code (the desktop app, VS Code, or the command line) is open.
2. The first time only, paste this into a Claude Code conversation and ask it to run it: claude mcp add nudgecss-bridge --scope user -- npx -y nudgecss-bridge
3. Make your edit in NudgeCSS, then click Export, then Send to Claude Code.
4. Back in Claude Code, ask it to check for pending NudgeCSS changes.

Cloning a Squarespace Site

If you're migrating off Squarespace, or any page builder, entirely, Clone Page captures the whole page you're looking at as real, buildable code, not just the one element you've been styling. This is a Bridge+ feature.

Click the Clone Page button at the bottom of the panel. A modal opens with three tabs:

• For AI Agent: A clean rebuild of the page's HTML and CSS as one pasteable text block, ready to hand to Claude, ChatGPT, or any AI assistant to help you rebuild the page in your new framework.
• Download Files: The same clean rebuild as separate .html and .css files.
• Exact Clone (.zip): A byte-real copy of the page: real fonts, real images, and the platform's own CSS and JS included, zipped for download. Use this when you want an exact starting point to de-platform from, not a reinterpretation.

Clone Page captures the current page only. For a full site, repeat this on each page you want to migrate.

FAQ